devextreme 21.2.9 → 21.2.10

package/dist/js/dx.all.debug.js

@@ -1,7 +1,7 @@
 /*!
  * DevExtreme (dx.all.debug.js)
- * Version: 21.2.9
- * Build date: Mon Jul 18 2022
+ * Version: 21.2.10
+ * Build date: Fri Sep 02 2022
  *
  * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
@@ -1613,6 +1613,7 @@
                         this.reset()
                     },
                     _createAnimations: function($elements, initialConfig, configModifier, type) {
+                        $elements = (0, _renderer.default)($elements);
                         var that = this;
                         var result = [];
                         configModifier = configModifier || {};
@@ -7053,7 +7054,7 @@
               !*** ./artifacts/transpiled-renovation-npm/core/utils/array.js ***!
               \*****************************************************************/
             function(__unused_webpack_module, exports, __webpack_require__) {
-                exports.wrapToArray = exports.uniqueValues = exports.removeDuplicates = exports.normalizeIndexes = exports.merge = exports.isEmpty = exports.intersection = exports.inArray = exports.groupBy = exports.find = void 0;
+                exports.wrapToArray = exports.uniqueValues = exports.removeDuplicates = exports.normalizeIndexes = exports.merge = exports.isEmpty = exports.inArray = exports.groupBy = exports.getIntersection = exports.find = void 0;
                 var _type = __webpack_require__( /*! ./type */ 35922);
                 var _iterator = __webpack_require__( /*! ./iterator */ 95479);
                 var _object = __webpack_require__( /*! ./object */ 48013);
@@ -7117,49 +7118,44 @@
                     }
                     return arr2
                 }
+
+                function createOccurrenceMap(array) {
+                    return array.reduce((function(map, value) {
+                        var _map$value;
+                        map[value] = (null !== (_map$value = map[value]) && void 0 !== _map$value ? _map$value : 0) + 1;
+                        return map
+                    }), {})
+                }
+                exports.getIntersection = function(firstArray, secondArray) {
+                    var secondArrayMap = createOccurrenceMap(secondArray);
+                    return firstArray.filter((function(value) {
+                        return secondArrayMap[value]--
+                    }))
+                };
+                exports.removeDuplicates = function() {
+                    var from = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [];
+                    var toRemove = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [];
+                    var toRemoveMap = createOccurrenceMap(toRemove);
+                    return from.filter((function(value) {
+                        return !toRemoveMap[value]--
+                    }))
+                };
                 exports.isEmpty = function(entity) {
                     return Array.isArray(entity) && !entity.length
                 };
                 exports.wrapToArray = function(entity) {
                     return Array.isArray(entity) ? entity : [entity]
                 };
-                var inArray = function(value, object) {
+                exports.inArray = function(value, object) {
                     if (!object) {
                         return -1
                     }
                     var array = Array.isArray(object) ? object : object.toArray();
                     return array.indexOf(value)
                 };
-                exports.inArray = inArray;
-                exports.intersection = function(a, b) {
-                    if (!Array.isArray(a) || 0 === a.length || !Array.isArray(b) || 0 === b.length) {
-                        return []
-                    }
-                    var result = [];
-                    (0, _iterator.each)(a, (function(_, value) {
-                        var index = inArray(value, b);
-                        if (-1 !== index) {
-                            result.push(value)
-                        }
-                    }));
-                    return result
-                };
                 exports.uniqueValues = function(data) {
                     return _toConsumableArray(new Set(data))
                 };
-                exports.removeDuplicates = function(from, what) {
-                    if (!Array.isArray(from) || 0 === from.length) {
-                        return []
-                    }
-                    var result = from.slice();
-                    if (!Array.isArray(what) || 0 === what.length) {
-                        return result
-                    }(0, _iterator.each)(what, (function(_, value) {
-                        var index = inArray(value, result);
-                        result.splice(index, 1)
-                    }));
-                    return result
-                };
                 exports.normalizeIndexes = function(items, indexParameterName, currentItem, needIndexCallback) {
                     var indexedItems = {};
                     var parameterIndex = 0;
@@ -11203,7 +11199,7 @@
               \*************************************************************/
             function(__unused_webpack_module, exports) {
                 exports.version = void 0;
-                exports.version = "21.2.9"
+                exports.version = "21.2.10"
             },
         67403:
             /*!********************************************************************!*\
@@ -11685,6 +11681,10 @@
                             var op = crit[1];
                             var value = crit[2];
                             value = (0, _data.toComparable)(value);
+                            var compare = function(obj, operatorFn) {
+                                obj = (0, _data.toComparable)(getter(obj));
+                                return (null == value || null == obj) && value !== obj ? false : operatorFn(obj, value)
+                            };
                             switch (op.toLowerCase()) {
                                 case "=":
                                     return compileEquals(getter, value);
@@ -11692,19 +11692,27 @@
                                     return compileEquals(getter, value, true);
                                 case ">":
                                     return function(obj) {
-                                        return (0, _data.toComparable)(getter(obj)) > value
+                                        return compare(obj, (function(a, b) {
+                                            return a > b
+                                        }))
                                     };
                                 case "<":
                                     return function(obj) {
-                                        return (0, _data.toComparable)(getter(obj)) < value
+                                        return compare(obj, (function(a, b) {
+                                            return a < b
+                                        }))
                                     };
                                 case ">=":
                                     return function(obj) {
-                                        return (0, _data.toComparable)(getter(obj)) >= value
+                                        return compare(obj, (function(a, b) {
+                                            return a >= b
+                                        }))
                                     };
                                 case "<=":
                                     return function(obj) {
-                                        return (0, _data.toComparable)(getter(obj)) <= value
+                                        return compare(obj, (function(a, b) {
+                                            return a <= b
+                                        }))
                                     };
                                 case "startswith":
                                     return function(obj) {
@@ -12151,6 +12159,21 @@
                     return arr2
                 }
 
+                function _extends() {
+                    _extends = Object.assign || function(target) {
+                        for (var i = 1; i < arguments.length; i++) {
+                            var source = arguments[i];
+                            for (var key in source) {
+                                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                                    target[key] = source[key]
+                                }
+                            }
+                        }
+                        return target
+                    };
+                    return _extends.apply(this, arguments)
+                }
+
                 function getItems(keyInfo, items, key, groupCount) {
                     if (groupCount) {
                         return function findItems(keyInfo, items, key, groupCount) {
@@ -12180,27 +12203,29 @@
                 }
 
                 function createObjectWithChanges(target, changes) {
-                    var result = function cloneInstance(instance, clonedInstances) {
+                    var result = function cloneInstanceWithChangedPaths(instance, changes, clonedInstances) {
                         clonedInstances = clonedInstances || new WeakMap;
                         var result = instance ? Object.create(Object.getPrototypeOf(instance)) : {};
                         if (instance) {
                             clonedInstances.set(instance, result)
                         }
-                        var instanceWithoutPrototype = (0, _extend.extendFromObject)({}, instance);
+                        var instanceWithoutPrototype = _extends({}, instance);
+                        (0, _object.deepExtendArraySafe)(result, instanceWithoutPrototype, true, true);
                         for (var name in instanceWithoutPrototype) {
-                            var prop = instanceWithoutPrototype[name];
-                            if ((0, _type.isObject)(prop) && !(0, _type.isPlainObject)(prop) && !clonedInstances.has(prop)) {
-                                instanceWithoutPrototype[name] = cloneInstance(prop, clonedInstances)
+                            var value = instanceWithoutPrototype[name];
+                            var change = null === changes || void 0 === changes ? void 0 : changes[name];
+                            if ((0, _type.isObject)(value) && !(0, _type.isPlainObject)(value) && (0, _type.isObject)(change) && !clonedInstances.has(value)) {
+                                result[name] = cloneInstanceWithChangedPaths(value, change, clonedInstances)
                             }
-                        }(0, _object.deepExtendArraySafe)(result, instanceWithoutPrototype, true, true);
+                        }
                         for (var _name in result) {
-                            var _prop = result[_name];
-                            if ((0, _type.isObject)(_prop) && clonedInstances.has(_prop)) {
-                                result[_name] = clonedInstances.get(_prop)
+                            var prop = result[_name];
+                            if ((0, _type.isObject)(prop) && clonedInstances.has(prop)) {
+                                result[_name] = clonedInstances.get(prop)
                             }
                         }
                         return result
-                    }(target);
+                    }(target, changes);
                     return (0, _object.deepExtendArraySafe)(result, changes, true, true)
                 }
 
@@ -27645,6 +27670,9 @@
                         "dxPager-infoText": "Page {0} of {1} ({2} items)",
                         "dxPager-pagesCountText": "of",
                         "dxPager-pageSizesAllText": "All",
+                        "dxPager-page": "Page {0}",
+                        "dxPager-prevPage": "Previous Page",
+                        "dxPager-nextPage": "Next Page",
                         "dxPivotGrid-grandTotal": "Grand Total",
                         "dxPivotGrid-total": "{0} Total",
                         "dxPivotGrid-fieldChooserTitle": "Field Chooser",
@@ -32700,8 +32728,9 @@
                         key: "elementAttr",
                         get: function() {
                             var _this8 = this;
+                            var element = this.$element()[0];
                             if (!this._elementAttr) {
-                                var attributes = this.$element()[0].attributes;
+                                var attributes = element.attributes;
                                 var attrs = Array.from(attributes).filter((function(attr) {
                                     var _attributes$attr$name;
                                     return !_this8._propsInfo.templates.includes(attr.name) && (null === (_attributes$attr$name = attributes[attr.name]) || void 0 === _attributes$attr$name ? void 0 : _attributes$attr$name.specified)
@@ -32709,13 +32738,14 @@
                                     var name = _ref7.name,
                                         value = _ref7.value;
                                     var updatedAttributes = result;
-                                    updatedAttributes[name] = "" === value ? "true" : value;
+                                    var isDomAttr = name in element;
+                                    updatedAttributes[name] = "" === value && isDomAttr ? element[name] : value;
                                     return updatedAttributes
                                 }), {});
                                 this._elementAttr = attrs;
-                                this._storedClasses = this.$element()[0].getAttribute("class") || ""
+                                this._storedClasses = element.getAttribute("class") || ""
                             }
-                            var elemStyle = this.$element()[0].style;
+                            var elemStyle = element.style;
                             var style = {};
                             for (var i = 0; i < elemStyle.length; i += 1) {
                                 style[elemStyle[i]] = elemStyle.getPropertyValue(elemStyle[i])
@@ -37302,7 +37332,7 @@
                 var _inferno2 = __webpack_require__( /*! @devextreme/runtime/inferno */ 44105);
                 var _subscribe_to_event = __webpack_require__( /*! ../../../utils/subscribe_to_event */ 19828);
                 var _keyboard_action_context = __webpack_require__( /*! ./keyboard_action_context */ 44133);
-                var _excluded = ["children", "className", "label", "onClick"];
+                var _excluded = ["children", "className", "label", "onClick", "tabIndex"];
 
                 function _objectWithoutProperties(source, excluded) {
                     if (null == source) {
@@ -37387,9 +37417,10 @@
                         children = _ref$props.children,
                         className = _ref$props.className,
                         label = _ref$props.label,
+                        tabIndex = _ref$props.tabIndex,
                         widgetRef = _ref.widgetRef;
                     return (0, _inferno.createVNode)(1, "div", className, children, 0, {
-                        tabIndex: 0,
+                        tabIndex: tabIndex,
                         role: "button",
                         "aria-label": label
                     }, null, widgetRef)
@@ -37397,7 +37428,8 @@
                 exports.viewFunction = viewFunction;
                 var LightButtonProps = {
                     className: "",
-                    label: ""
+                    label: "",
+                    tabIndex: 0
                 };
                 exports.LightButtonProps = LightButtonProps;
                 var LightButton = function(_InfernoComponent) {
@@ -37463,7 +37495,7 @@
                         key: "restAttributes",
                         get: function() {
                             var _this$props = this.props,
-                                restProps = (_this$props.children, _this$props.className, _this$props.label, _this$props.onClick, _objectWithoutProperties(_this$props, _excluded));
+                                restProps = (_this$props.children, _this$props.className, _this$props.label, _this$props.onClick, _this$props.tabIndex, _objectWithoutProperties(_this$props, _excluded));
                             return restProps
                         }
                     }]);
@@ -39345,6 +39377,11 @@
                 var _light_button = __webpack_require__( /*! ../common/light_button */ 93961);
                 var _consts = __webpack_require__( /*! ../common/consts */ 39853);
                 var _combine_classes = __webpack_require__( /*! ../../../utils/combine_classes */ 86237);
+                var _message = (obj = __webpack_require__( /*! ../../../../localization/message */ 28109), obj && obj.__esModule ? obj : {
+                    default: obj
+                });
+                var obj;
+                var _string = __webpack_require__( /*! ../../../../core/utils/string */ 68752);
                 var _excluded = ["className", "index", "onClick", "selected"];
 
                 function _objectWithoutProperties(source, excluded) {
@@ -39489,7 +39526,7 @@
                     }(Page, [{
                         key: "label",
                         get: function() {
-                            return "Page ".concat(this.value)
+                            return (0, _string.format)(_message.default.getFormatter("dxPager-page"), this.value)
                         }
                     }, {
                         key: "value",
@@ -39529,6 +39566,10 @@
                 var _small = __webpack_require__( /*! ./small */ 50570);
                 var _pager_props = __webpack_require__( /*! ../common/pager_props */ 96529);
                 var _config_context = __webpack_require__( /*! ../../../common/config_context */ 49697);
+                var _message = (obj = __webpack_require__( /*! ../../../../localization/message */ 28109), obj && obj.__esModule ? obj : {
+                    default: obj
+                });
+                var obj;
                 var _excluded = ["hasKnownLastPage", "isLargeDisplayMode", "maxPagesCount", "pageCount", "pageIndex", "pageIndexChange", "pagesCountText", "showNavigationButtons", "totalCount"];
 
                 function _objectWithoutProperties(source, excluded) {
@@ -39610,16 +39651,20 @@
                     return _setPrototypeOf(o, p)
                 }
                 exports.PAGER_BUTTON_DISABLE_CLASS = "dx-button-disable";
-                var nextButtonClassName = "".concat("dx-navigate-button", " ").concat("dx-next-button");
-                var prevButtonClassName = "".concat("dx-navigate-button", " ").concat("dx-prev-button");
-                var nextButtonDisabledClassName = "".concat("dx-button-disable", " ").concat("dx-navigate-button", " ").concat("dx-next-button");
-                var prevButtonDisabledClassName = "".concat("dx-button-disable", " ").concat("dx-navigate-button", " ").concat("dx-prev-button");
+                var classNames = {
+                    nextEnabledClass: "".concat("dx-navigate-button", " ").concat("dx-next-button"),
+                    prevEnabledClass: "".concat("dx-navigate-button", " ").concat("dx-prev-button"),
+                    nextDisabledClass: "".concat("dx-button-disable", " ").concat("dx-navigate-button", " ").concat("dx-next-button"),
+                    prevDisabledClass: "".concat("dx-button-disable", " ").concat("dx-navigate-button", " ").concat("dx-prev-button")
+                };
+                var reverseDirections = {
+                    next: "prev",
+                    prev: "next"
+                };
                 var viewFunction = function(_ref) {
-                    var navigateToNextPage = _ref.navigateToNextPage,
-                        navigateToPrevPage = _ref.navigateToPrevPage,
-                        nextClassName = _ref.nextClassName,
+                    var nextButtonProps = _ref.nextButtonProps,
                         pageIndexChange = _ref.pageIndexChange,
-                        prevClassName = _ref.prevClassName,
+                        prevButtonProps = _ref.prevButtonProps,
                         _ref$props = _ref.props,
                         isLargeDisplayMode = _ref$props.isLargeDisplayMode,
                         maxPagesCount = _ref$props.maxPagesCount,
@@ -39629,9 +39674,10 @@
                         renderNextButton = _ref.renderNextButton,
                         renderPrevButton = _ref.renderPrevButton;
                     return (0, _inferno.createFragment)([renderPrevButton && (0, _inferno.createComponentVNode)(2, _light_button.LightButton, {
-                        className: prevClassName,
-                        label: "Previous page",
-                        onClick: navigateToPrevPage
+                        label: _message.default.getFormatter("dxPager-prevPage")(),
+                        className: prevButtonProps.className,
+                        tabIndex: prevButtonProps.tabIndex,
+                        onClick: prevButtonProps.navigate
                     }), isLargeDisplayMode && (0, _inferno.createComponentVNode)(2, _large.PagesLarge, {
                         maxPagesCount: maxPagesCount,
                         pageCount: pageCount,
@@ -39643,9 +39689,10 @@
                         pageIndexChange: pageIndexChange,
                         pagesCountText: pagesCountText
                     }), renderNextButton && (0, _inferno.createComponentVNode)(2, _light_button.LightButton, {
-                        className: nextClassName,
-                        label: "Next page",
-                        onClick: navigateToNextPage
+                        label: _message.default.getFormatter("dxPager-nextPage")(),
+                        className: nextButtonProps.className,
+                        tabIndex: nextButtonProps.tabIndex,
+                        onClick: nextButtonProps.navigate
                     })], 0)
                 };
                 exports.viewFunction = viewFunction;
@@ -39715,11 +39762,9 @@
                         var _this;
                         _this = _BaseInfernoComponent.call(this, props) || this;
                         _this.state = {};
+                        _this.__getterCache = {};
                         _this.pageIndexChange = _this.pageIndexChange.bind(_assertThisInitialized(_this));
-                        _this.navigateToNextPage = _this.navigateToNextPage.bind(_assertThisInitialized(_this));
-                        _this.navigateToPrevPage = _this.navigateToPrevPage.bind(_assertThisInitialized(_this));
-                        _this.getNextDirection = _this.getNextDirection.bind(_assertThisInitialized(_this));
-                        _this.getPrevDirection = _this.getPrevDirection.bind(_assertThisInitialized(_this));
+                        _this.getButtonProps = _this.getButtonProps.bind(_assertThisInitialized(_this));
                         _this.canNavigateToPage = _this.canNavigateToPage.bind(_assertThisInitialized(_this));
                         _this.getNextPageIndex = _this.getNextPageIndex.bind(_assertThisInitialized(_this));
                         _this.canNavigateTo = _this.canNavigateTo.bind(_assertThisInitialized(_this));
@@ -39732,19 +39777,18 @@
                             this.props.pageIndexChange(pageIndex)
                         }
                     };
-                    _proto.navigateToNextPage = function() {
-                        this.navigateToPage(this.getNextDirection())
-                    };
-                    _proto.navigateToPrevPage = function() {
-                        this.navigateToPage(this.getPrevDirection())
-                    };
-                    _proto.getNextDirection = function() {
-                        var _this$config;
-                        return !(null !== (_this$config = this.config) && void 0 !== _this$config && _this$config.rtlEnabled) ? "next" : "prev"
-                    };
-                    _proto.getPrevDirection = function() {
-                        var _this$config2;
-                        return !(null !== (_this$config2 = this.config) && void 0 !== _this$config2 && _this$config2.rtlEnabled) ? "prev" : "next"
+                    _proto.getButtonProps = function(direction) {
+                        var _this$config, _this2 = this;
+                        var rtlAwareDirection = null !== (_this$config = this.config) && void 0 !== _this$config && _this$config.rtlEnabled ? reverseDirections[direction] : direction;
+                        var canNavigate = this.canNavigateTo(rtlAwareDirection);
+                        var className = classNames["".concat(direction).concat(canNavigate ? "Enabled" : "Disabled", "Class")];
+                        return {
+                            className: className,
+                            tabIndex: canNavigate ? 0 : -1,
+                            navigate: function() {
+                                return _this2.navigateToPage(rtlAwareDirection)
+                            }
+                        }
                     };
                     _proto.canNavigateToPage = function(pageIndex) {
                         if (!this.props.hasKnownLastPage) {
@@ -39763,18 +39807,24 @@
                     _proto.navigateToPage = function(direction) {
                         this.pageIndexChange(this.getNextPageIndex(direction))
                     };
+                    _proto.componentWillUpdate = function(nextProps, nextState, context) {
+                        if (this.context.ConfigContext !== context.ConfigContext || this.props.hasKnownLastPage !== nextProps.hasKnownLastPage || this.props.pageCount !== nextProps.pageCount || this.props.pageIndex !== nextProps.pageIndex || this.props.pageIndexChange !== nextProps.pageIndexChange) {
+                            this.__getterCache.prevButtonProps = void 0
+                        }
+                        if (this.context.ConfigContext !== context.ConfigContext || this.props.hasKnownLastPage !== nextProps.hasKnownLastPage || this.props.pageCount !== nextProps.pageCount || this.props.pageIndex !== nextProps.pageIndex || this.props.pageIndexChange !== nextProps.pageIndexChange) {
+                            this.__getterCache.nextButtonProps = void 0
+                        }
+                    };
                     _proto.render = function() {
                         var props = this.props;
                         return viewFunction({
                             props: _extends({}, props),
                             config: this.config,
                             pageIndexChange: this.pageIndexChange,
-                            navigateToNextPage: this.navigateToNextPage,
-                            navigateToPrevPage: this.navigateToPrevPage,
                             renderPrevButton: this.renderPrevButton,
                             renderNextButton: this.renderNextButton,
-                            nextClassName: this.nextClassName,
-                            prevClassName: this.prevClassName,
+                            prevButtonProps: this.prevButtonProps,
+                            nextButtonProps: this.nextButtonProps,
                             restAttributes: this.restAttributes
                         })
                     };
@@ -39811,18 +39861,22 @@
                             return this.renderPrevButton || !this.props.hasKnownLastPage
                         }
                     }, {
-                        key: "nextClassName",
+                        key: "prevButtonProps",
                         get: function() {
-                            var direction = this.getNextDirection();
-                            var canNavigate = this.canNavigateTo(direction);
-                            return canNavigate ? nextButtonClassName : nextButtonDisabledClassName
+                            var _this3 = this;
+                            if (void 0 !== this.__getterCache.prevButtonProps) {
+                                return this.__getterCache.prevButtonProps
+                            }
+                            return this.__getterCache.prevButtonProps = _this3.getButtonProps("prev")
                         }
                     }, {
-                        key: "prevClassName",
+                        key: "nextButtonProps",
                         get: function() {
-                            var direction = this.getPrevDirection();
-                            var canNavigate = this.canNavigateTo(direction);
-                            return canNavigate ? prevButtonClassName : prevButtonDisabledClassName
+                            var _this4 = this;
+                            if (void 0 !== this.__getterCache.nextButtonProps) {
+                                return this.__getterCache.nextButtonProps
+                            }
+                            return this.__getterCache.nextButtonProps = _this4.getButtonProps("next")
                         }
                     }, {
                         key: "restAttributes",
@@ -41959,15 +42013,24 @@
                         return new Date(resultDate)
                     };
                     _proto.getOriginStartDateOffsetInMs = function(date, timezone, isUTCDate) {
-                        if (!timezone) {
-                            return 0
-                        }
+                        var offsetInHours = this.getOffsetInHours(date, timezone, isUTCDate);
+                        return 36e5 * offsetInHours
+                    };
+                    _proto.getOffsetInHours = function(date, timezone, isUTCDate) {
                         var _this$getOffsets = this.getOffsets(date, timezone),
                             appointment = _this$getOffsets.appointment,
                             client = _this$getOffsets.client,
                             common = _this$getOffsets.common;
-                        var offsetInHours = isUTCDate ? appointment - client : appointment - common;
-                        return 36e5 * offsetInHours
+                        if (!!timezone && isUTCDate) {
+                            return appointment - client
+                        }
+                        if (!!timezone && !isUTCDate) {
+                            return appointment - common
+                        }
+                        if (!timezone && isUTCDate) {
+                            return common - client
+                        }
+                        return 0
                     };
                     _proto.getClientOffset = function(date) {
                         return this.options.getClientOffset(date)
@@ -60599,6 +60662,7 @@
                         this._renderGroupPanelItems($groupPanel, groupColumns);
                         if (groupPanelOptions.allowColumnDragging && !groupColumns.length) {
                             (0, _renderer.default)("<div>").addClass("dx-group-panel-message").text(groupPanelOptions.emptyPanelText).appendTo($groupPanel);
+                            $groupPanel.closest(".dx-toolbar-item").addClass("dx-toolbar-label");
                             $groupPanel.closest(".dx-toolbar-label").css("maxWidth", "none");
                             this.updateToolbarDimensions()
                         }
@@ -76999,7 +77063,6 @@
                             onInitialized: function(args) {
                                 args.component.$wrapper().addClass("dx-dropdownmenu-popup-wrapper").toggleClass("dx-dropdownmenu-popup", usePopup)
                             },
-                            visible: this.option("opened"),
                             deferRendering: false,
                             contentTemplate: function(contentElement) {
                                 this._renderList(contentElement)
@@ -81856,6 +81919,9 @@
                                 mode: "single",
                                 showSortIndexes: false
                             },
+                            loadPanel: {
+                                shading: true
+                            },
                             showColumnLines: false,
                             showRowLines: false,
                             columnHidingEnabled: false,
@@ -99780,7 +99846,7 @@
                         if (e.scrollOffset.top < 0) {
                             elasticScrollTop = -e.scrollOffset.top
                         } else if (e.reachedBottom) {
-                            var $scrollableContent = (0, _renderer.default)(this._findContentElement());
+                            var $scrollableContent = (0, _renderer.default)(e.component.content());
                             var $scrollableContainer = (0, _renderer.default)(e.component.container());
                             var maxScrollTop = Math.max($scrollableContent.get(0).clientHeight - $scrollableContainer.get(0).clientHeight, 0);
                             elasticScrollTop = maxScrollTop - e.scrollOffset.top
@@ -100883,11 +100949,10 @@
                                 }(that, column);
                                 resetBandColumnsCache(that);
                                 ! function(that, currentColumn) {
-                                    var key;
                                     var column;
-                                    var bandColumns = {};
                                     var result = [];
                                     var bandColumnsCache = that.getBandColumnsCache();
+                                    var bandedColumns = [];
                                     var columns = that._columns.filter((function(column) {
                                         return !column.command
                                     }));
@@ -100895,16 +100960,12 @@
                                         column = columns[i];
                                         var parentBandColumns = getParentBandColumns(i, bandColumnsCache.columnParentByIndex);
                                         if (parentBandColumns.length) {
-                                            var bandColumnIndex = parentBandColumns[parentBandColumns.length - 1].index;
-                                            bandColumns[bandColumnIndex] = bandColumns[bandColumnIndex] || [];
-                                            bandColumns[bandColumnIndex].push(column)
+                                            bandedColumns.push(column)
                                         } else {
                                             result.push(column)
                                         }
-                                    }
-                                    for (key in bandColumns) {
-                                        (0, _array.normalizeIndexes)(bandColumns[key], "visibleIndex", currentColumn)
-                                    }(0, _array.normalizeIndexes)(result, "visibleIndex", currentColumn)
+                                    }(0, _array.normalizeIndexes)(bandedColumns, "visibleIndex", currentColumn);
+                                    (0, _array.normalizeIndexes)(result, "visibleIndex", currentColumn)
                                 }(that, column)
                             };
                             var resetColumnsCache = function(that) {
@@ -105080,8 +105141,10 @@
                                     return true
                                 },
                                 optionChanged: function(args) {
+                                    var _this2 = this;
                                     var that = this;
                                     var dataSource;
+                                    var changedPagingOptions;
 
                                     function handled() {
                                         args.handled = true
@@ -105106,11 +105169,16 @@
                                             break;
                                         case "paging":
                                             dataSource = that.dataSource();
-                                            if (dataSource && that._setPagingOptions(dataSource)) {
-                                                var pageIndex = dataSource.pageIndex();
-                                                dataSource.load().done((function() {
-                                                    return that.pageChanged.fire(pageIndex)
-                                                }))
+                                            if (dataSource) {
+                                                changedPagingOptions = that._setPagingOptions(dataSource);
+                                                if (changedPagingOptions) {
+                                                    var pageIndex = dataSource.pageIndex();
+                                                    this._isPaging = changedPagingOptions.isPageIndexChanged;
+                                                    dataSource.load().done((function() {
+                                                        _this2._isPaging = false;
+                                                        that.pageChanged.fire(pageIndex)
+                                                    }))
+                                                }
                                             }
                                             handled();
                                             break;
@@ -105305,21 +105373,30 @@
                                     var appendMode = "infinite" === scrollingMode;
                                     var virtualMode = "virtual" === scrollingMode;
                                     var paginate = pagingEnabled || virtualMode || appendMode;
-                                    var isChanged = false;
+                                    var isPaginateChanged = false;
+                                    var isPageSizeChanged = false;
+                                    var isPageIndexChanged = false;
                                     dataSource.requireTotalCount(!appendMode);
                                     if (void 0 !== pagingEnabled && dataSource.paginate() !== paginate) {
                                         dataSource.paginate(paginate);
-                                        isChanged = true
+                                        isPaginateChanged = true
                                     }
                                     if (void 0 !== pageSize && dataSource.pageSize() !== pageSize) {
                                         dataSource.pageSize(pageSize);
-                                        isChanged = true
+                                        isPageSizeChanged = true
                                     }
                                     if (void 0 !== pageIndex && dataSource.pageIndex() !== pageIndex) {
                                         dataSource.pageIndex(pageIndex);
-                                        isChanged = true
+                                        isPageIndexChanged = true
                                     }
-                                    return isChanged
+                                    if (isPaginateChanged || isPageSizeChanged || isPageIndexChanged) {
+                                        return {
+                                            isPaginateChanged: isPaginateChanged,
+                                            isPageSizeChanged: isPageSizeChanged,
+                                            isPageIndexChanged: isPageIndexChanged
+                                        }
+                                    }
+                                    return false
                                 },
                                 _getSpecificDataSourceOption: function() {
                                     var dataSource = this.option("dataSource");
@@ -105342,18 +105419,23 @@
                                     this._useSortingGroupingFromColumns = true;
                                     this._cachedProcessedItems = null;
                                     if (dataSource) {
-                                        this._setPagingOptions(dataSource);
+                                        var changedPagingOptions = this._setPagingOptions(dataSource);
+                                        this._isPaging = null === changedPagingOptions || void 0 === changedPagingOptions ? void 0 : changedPagingOptions.isPageIndexChanged;
                                         this.setDataSource(dataSource)
                                     } else if (oldDataSource) {
                                         this.updateItems()
                                     }
                                 },
                                 _loadDataSource: function() {
-                                    var dataSource = this._dataSource;
+                                    var that = this;
+                                    var dataSource = that._dataSource;
                                     var result = new _deferred.Deferred;
                                     (0, _deferred.when)(this._columnsController.refresh(true)).always((function() {
                                         if (dataSource) {
-                                            dataSource.load().done(result.resolve).fail(result.reject)
+                                            dataSource.load().done((function() {
+                                                that._isPaging = false;
+                                                result.resolve.apply(result, arguments)
+                                            })).fail(result.reject)
                                         } else {
                                             result.resolve()
                                         }
@@ -105599,7 +105681,7 @@
                                     return true
                                 },
                                 _applyChangesOnly: function(change) {
-                                    var _change$isLiveUpdate, _this2 = this;
+                                    var _change$isLiveUpdate, _this3 = this;
                                     var rowIndices = [];
                                     var columnIndices = [];
                                     var changeTypes = [];
@@ -105620,7 +105702,7 @@
                                         item.rowIndex = index
                                     }));
                                     var result = (0, _array_compare.findChanges)(oldItems, change.items, getRowKey, (function(item1, item2) {
-                                        if (!_this2._isItemEquals(item1, item2)) {
+                                        if (!_this3._isItemEquals(item1, item2)) {
                                             return false
                                         }
                                         if (item1.cells) {
@@ -105643,7 +105725,7 @@
                                                 var index = change.index;
                                                 var newItem = change.data;
                                                 var oldItem = change.oldItem;
-                                                var changedColumnIndices = _this2._partialUpdateRow(oldItem, newItem, index, isLiveUpdate);
+                                                var changedColumnIndices = _this3._partialUpdateRow(oldItem, newItem, index, isLiveUpdate);
                                                 rowIndices.push(index);
                                                 changeTypes.push("update");
                                                 items.push(newItem);
@@ -105675,8 +105757,8 @@
                                         change.isLiveUpdate = true
                                     }
                                     this._correctRowIndices((function(rowIndex) {
-                                        var oldRowIndexOffset = _this2._rowIndexOffset || 0;
-                                        var rowIndexOffset = _this2.getRowIndexOffset();
+                                        var oldRowIndexOffset = _this3._rowIndexOffset || 0;
+                                        var rowIndexOffset = _this3.getRowIndexOffset();
                                         var oldItem = oldItems[rowIndex - oldRowIndexOffset];
                                         var key = getRowKey(oldItem);
                                         var newVisibleRowIndex = newIndexByKey[key];
@@ -105771,12 +105853,12 @@
                                     return dataSource && dataSource.loadingOperationTypes() || {}
                                 },
                                 _fireChanged: function(change) {
-                                    var _this3 = this;
+                                    var _this4 = this;
                                     if (this._currentOperationTypes) {
                                         change.operationTypes = this._currentOperationTypes;
                                         this._currentOperationTypes = null
                                     }(0, _common.deferRender)((function() {
-                                        _this3.changed.fire(change)
+                                        _this4.changed.fire(change)
                                     }))
                                 },
                                 isLoading: function() {
@@ -105789,14 +105871,14 @@
                                     return null
                                 },
                                 _applyFilter: function() {
-                                    var _this4 = this;
+                                    var _this5 = this;
                                     var dataSource = this._dataSource;
                                     if (dataSource) {
                                         dataSource.pageIndex(0);
                                         this._isFilterApplying = true;
                                         return this.reload().done((function() {
-                                            if (_this4._isFilterApplying) {
-                                                _this4.pageChanged.fire()
+                                            if (_this5._isFilterApplying) {
+                                                _this5.pageChanged.fire()
                                             }
                                         }))
                                     }
@@ -113236,9 +113318,20 @@
                                                 }
                                             } else {
                                                 var filterOperation = sortInfo.desc ? ">" : "<";
-                                                var sortFilter = [selector, filterOperation, value];
-                                                if (!sortInfo.desc) {
-                                                    sortFilter = [sortFilter, "or", [selector, "=", null]]
+                                                var sortFilter;
+                                                if (sortInfo.compare) {
+                                                    sortFilter = function(data) {
+                                                        if ("<" === filterOperation) {
+                                                            return sortInfo.compare(value, getter(data)) >= 1
+                                                        } else {
+                                                            return sortInfo.compare(value, getter(data)) <= -1
+                                                        }
+                                                    }
+                                                } else {
+                                                    sortFilter = [selector, filterOperation, value];
+                                                    if (!sortInfo.desc) {
+                                                        sortFilter = [sortFilter, "or", [selector, "=", null]]
+                                                    }
                                                 }
                                                 filter = [sortFilter, "or", filter]
                                             }
@@ -114962,6 +115055,7 @@
                         var $indicator = options.indicator;
                         if ("headerFilter" === options.name) {
                             var rtlEnabled = this.option("rtlEnabled");
+                            $indicator.attr("role", "button");
                             if ($container.children().length && (!rtlEnabled && "right" === options.columnAlignment || rtlEnabled && "left" === options.columnAlignment)) {
                                 $container.prepend($indicator);
                                 return
@@ -116007,7 +116101,7 @@
                             if ($parent.hasClass("dx-freespace-row")) {
                                 this._updateFocusedCellPosition($target);
                                 this._applyTabIndexToElement(this._focusedView.element());
-                                this._focusedView.focus()
+                                this._focusedView.focus(true)
                             } else if (!this._isMasterDetailCell($target)) {
                                 this._clickTargetCellHandler(event, $target)
                             } else {
@@ -116040,6 +116134,7 @@
                                 this._isNeedFocus = false;
                                 this._isHiddenFocus = false
                             } else {
+                                $cell = this._getFocusedCell();
                                 var $target = event && (0, _renderer.default)(event.target).closest(NON_FOCUSABLE_ELEMENTS_SELECTOR + ", td");
                                 var skipFocusEvent = $target && $target.not($cell).is(NON_FOCUSABLE_ELEMENTS_SELECTOR);
                                 var isEditor = !!column && !column.command && $cell.hasClass("dx-editor-cell");
@@ -116948,16 +117043,17 @@
                                 _rowClick: function(e) {
                                     var editRowIndex = this.getController("editing").getEditRowIndex();
                                     var keyboardController = this.getController("keyboardNavigation");
+                                    var isKeyboardEnabled = keyboardController.isKeyboardEnabled();
                                     if (editRowIndex === e.rowIndex) {
                                         keyboardController.setCellFocusType()
                                     }
-                                    var needTriggerPointerEventHandler = isMobile() && this.option("focusedRowEnabled");
+                                    var needTriggerPointerEventHandler = (isMobile() || !isKeyboardEnabled) && this.option("focusedRowEnabled");
                                     if (needTriggerPointerEventHandler) {
-                                        this._triggerPointerDownEventHandler(e)
+                                        this._triggerPointerDownEventHandler(e, !isKeyboardEnabled)
                                     }
                                     this.callBase.apply(this, arguments)
                                 },
-                                _triggerPointerDownEventHandler: function(e) {
+                                _triggerPointerDownEventHandler: function(e, force) {
                                     var originalEvent = e.event.originalEvent;
                                     if (originalEvent) {
                                         var keyboardController = this.getController("keyboardNavigation");
@@ -116965,7 +117061,7 @@
                                         var columnIndex = this.getCellIndex($cell);
                                         var column = this.getController("columns").getVisibleColumns()[columnIndex];
                                         var row = this.getController("data").items()[e.rowIndex];
-                                        if (keyboardController._isAllowEditing(row, column)) {
+                                        if (keyboardController._isAllowEditing(row, column) || force) {
                                             var eventArgs = (0, _index.createEvent)(originalEvent, {
                                                 currentTarget: originalEvent.target
                                             });
@@ -117408,33 +117504,54 @@
                                     var masterRowOptions = (0, _renderer.default)($masterDetailRow).data("options");
                                     var masterDataGrid = (0, _renderer.default)($masterDetailRow).closest("." + this.getWidgetContainerClass()).parent().data("dxDataGrid");
                                     if (masterRowOptions && masterDataGrid) {
-                                        if (masterDataGrid.getView("rowsView").isFixedColumns()) {
-                                            return this._updateFixedMasterDetailGrids(masterDataGrid, masterRowOptions.rowIndex, $detailElement)
+                                        return this._updateMasterDataGridCore(masterDataGrid, masterRowOptions)
+                                    }
+                                },
+                                _updateMasterDataGridCore: function(masterDataGrid, masterRowOptions) {
+                                    var d = (0, _deferred.Deferred)();
+                                    if (masterDataGrid.getView("rowsView").isFixedColumns()) {
+                                        this._updateFixedMasterDetailGrids(masterDataGrid, masterRowOptions.rowIndex, (0, _renderer.default)(masterRowOptions.rowElement)).done(d.resolve)
+                                    } else {
+                                        if (true === masterDataGrid.option("scrolling.useNative")) {
+                                            masterDataGrid.updateDimensions().done((function() {
+                                                return d.resolve(true)
+                                            }));
+                                            return
+                                        }
+                                        var scrollable = masterDataGrid.getScrollable();
+                                        if (scrollable) {
+                                            null === scrollable || void 0 === scrollable ? void 0 : scrollable.update().done((function() {
+                                                return d.resolve()
+                                            }))
                                         } else {
-                                            if (true === masterDataGrid.option("scrolling.useNative")) {
-                                                return masterDataGrid.updateDimensions()
-                                            }
-                                            var scrollable = masterDataGrid.getScrollable();
-                                            return null === scrollable || void 0 === scrollable ? void 0 : scrollable.update()
+                                            d.resolve()
                                         }
                                     }
+                                    return d.promise()
                                 },
                                 _updateFixedMasterDetailGrids: function(masterDataGrid, masterRowIndex, $detailElement) {
                                     var _this2 = this;
+                                    var d = (0, _deferred.Deferred)();
                                     var $rows = (0, _renderer.default)(masterDataGrid.getRowElement(masterRowIndex));
                                     var $tables = (0, _renderer.default)(masterDataGrid.getView("rowsView").getTableElements());
                                     var rowsNotEqual = 2 === (null === $rows || void 0 === $rows ? void 0 : $rows.length) && (0, _size.getHeight)($rows.eq(0)) !== (0, _size.getHeight)($rows.eq(1));
                                     var tablesNotEqual = 2 === (null === $tables || void 0 === $tables ? void 0 : $tables.length) && (0, _size.getHeight)($tables.eq(0)) !== (0, _size.getHeight)($tables.eq(1));
                                     if (rowsNotEqual || tablesNotEqual) {
                                         var detailElementWidth = (0, _size.getWidth)($detailElement);
-                                        return masterDataGrid.updateDimensions().done((function() {
+                                        masterDataGrid.updateDimensions().done((function() {
                                             var isDetailHorizontalScrollCanBeShown = _this2.option("columnAutoWidth") && true === masterDataGrid.option("scrolling.useNative");
                                             var isDetailGridWidthChanged = isDetailHorizontalScrollCanBeShown && detailElementWidth !== (0, _size.getWidth)($detailElement);
                                             if (isDetailHorizontalScrollCanBeShown && isDetailGridWidthChanged) {
-                                                _this2.updateDimensions()
+                                                _this2.updateDimensions().done((function() {
+                                                    return d.resolve(true)
+                                                }))
+                                            } else {
+                                                d.resolve(true)
                                             }
-                                        }))
+                                        }));
+                                        return d.promise()
                                     }
+                                    return (0, _deferred.Deferred)().resolve()
                                 },
                                 _toggleBestFitMode: function(isBestFit) {
                                     this.callBase.apply(this, arguments);
@@ -117514,7 +117631,6 @@
             function(module, exports, __webpack_require__) {
                 exports.default = void 0;
                 var _renderer = _interopRequireDefault(__webpack_require__( /*! ../../core/renderer */ 68374));
-                var _events_engine = _interopRequireDefault(__webpack_require__( /*! ../../events/core/events_engine */ 55994));
                 var _class = _interopRequireDefault(__webpack_require__( /*! ../../core/class */ 38377));
                 var _callbacks = _interopRequireDefault(__webpack_require__( /*! ../../core/utils/callbacks */ 44504));
                 var _common = __webpack_require__( /*! ../../core/utils/common */ 20576);
@@ -117737,8 +117853,10 @@
                         this.resizeCompleted.fire();
                         this.isResizing = false
                     },
-                    focus: function() {
-                        _events_engine.default.trigger(this.element(), "focus")
+                    focus: function(preventScroll) {
+                        this.element().get(0).focus({
+                            preventScroll: preventScroll
+                        })
                     }
                 });
                 var _default = {
@@ -118662,6 +118780,7 @@
                                 return itemsCount > 0 && !this._rowHeight
                             },
                             _getRowsHeight: function($tableElement) {
+                                $tableElement = $tableElement || this._tableElement;
                                 var $rowElements = $tableElement.children("tbody").children().not(".dx-virtual-row").not(".dx-freespace-row");
                                 return $rowElements.toArray().reduce((function(sum, row) {
                                     return sum + (0, _position.getBoundingRect)(row).height
@@ -120171,7 +120290,7 @@
                                 },
                                 _handleDataChanged: function(e) {
                                     this.callBase(e);
-                                    if (!e || "refresh" === e.changeType) {
+                                    if (!e || "refresh" === e.changeType || e.repaintChangesOnly && "update" === e.changeType) {
                                         this._updateSelectAllValue()
                                     }
                                 },
@@ -120180,7 +120299,7 @@
                                     var selectionController = that.getController("selection");
                                     var isEmptyData = that.getController("data").isEmpty();
                                     var groupElement = (0, _renderer.default)("<div>").appendTo($container).addClass("dx-select-checkbox");
-                                    that.setAria("label", _message.default.format("dxDataGrid-ariaSelectAll"), $container);
+                                    that.setAria("label", _message.default.format("dxDataGrid-ariaSelectAll"), groupElement);
                                     that.getController("editorFactory").createEditor(groupElement, (0, _extend.extend)({}, column, {
                                         parentType: "headerRow",
                                         dataType: "boolean",
@@ -120220,7 +120339,6 @@
                                     if ("data" === options.rowType && !options.row.isNewRow) {
                                         $container.addClass("dx-editor-cell");
                                         this._attachCheckBoxClickEvent($container);
-                                        this.setAria("label", _message.default.format("dxDataGrid-ariaSelectRow"), $container);
                                         this._renderSelectCheckBox($container, options)
                                     } else {
                                         _uiGrid_core.default.setEmptyText($container)
@@ -120228,6 +120346,7 @@
                                 },
                                 _renderSelectCheckBox: function(container, options) {
                                     var groupElement = (0, _renderer.default)("<div>").addClass("dx-select-checkbox").appendTo(container);
+                                    this.setAria("label", _message.default.format("dxDataGrid-ariaSelectRow"), groupElement);
                                     this.getController("editorFactory").createEditor(groupElement, (0, _extend.extend)({}, options.column, {
                                         parentType: "dataRow",
                                         dataType: "boolean",
@@ -120313,7 +120432,10 @@
                                         if (isSelected) {
                                             $row.addClass("dx-selection")
                                         }
-                                        this.setAria("selected", isSelected, $row)
+                                        var selectionMode = this.option("selection.mode");
+                                        if ("none" !== selectionMode) {
+                                            this.setAria("selected", isSelected, $row)
+                                        }
                                     }
                                     return $row
                                 },
@@ -123495,6 +123617,17 @@
                         $virtualRow = this._wrapRowIfNeed($table, $virtualRow);
                         this._appendEmptyRow($table, $virtualRow, location)
                     },
+                    _updateContentItemSizes: function() {
+                        var rowHeights = this._getRowHeights();
+                        var correctedRowHeights = this._correctRowHeights(rowHeights);
+                        this._dataController.setContentItemSizes(correctedRowHeights)
+                    },
+                    _updateViewportSize: function(viewportHeight, scrollTop) {
+                        if (!(0, _type.isDefined)(viewportHeight)) {
+                            viewportHeight = this._hasHeight ? (0, _size.getOuterHeight)(this.element()) : (0, _size.getOuterHeight)((0, _window.getWindow)())
+                        }
+                        this._dataController.viewportHeight(viewportHeight, scrollTop)
+                    },
                     _getRowHeights: function() {
                         var _this$getController, _this$getController$i;
                         var isPopupEditMode = null === (_this$getController = this.getController("editing")) || void 0 === _this$getController ? void 0 : null === (_this$getController$i = _this$getController.isPopupEditMode) || void 0 === _this$getController$i ? void 0 : _this$getController$i.call(_this$getController);
@@ -123547,9 +123680,7 @@
                         dataController.viewportItemSize(rowHeight);
                         if (isVirtualMode(this) || _uiGrid_core2.default.isVirtualRowRendering(this)) {
                             if (!isRender) {
-                                var rowHeights = this._getRowHeights();
-                                var correctedRowHeights = this._correctRowHeights(rowHeights);
-                                dataController.setContentItemSizes(correctedRowHeights)
+                                this._updateContentItemSizes()
                             }
                             var top = dataController.getContentOffset("begin");
                             var bottom = dataController.getContentOffset("end");
@@ -123616,6 +123747,10 @@
                         var zeroTopPosition = 0 === e.scrollOffset.top;
                         if ((this._hasHeight || !legacyScrollingMode && zeroTopPosition) && this._rowHeight) {
                             this._scrollTop = e.scrollOffset.top;
+                            if (isVirtualMode(this) && false === this.option(LEGACY_SCROLLING_MODE)) {
+                                this._updateContentItemSizes();
+                                this._updateViewportSize(null, this._scrollTop)
+                            }
                             this._dataController.setViewportPosition(e.scrollOffset.top)
                         }
                         this.callBase.apply(this, arguments)
@@ -123630,7 +123765,7 @@
                             var viewportHeight = this._hasHeight ? (0, _size.getOuterHeight)(this.element()) : (0, _size.getOuterHeight)((0, _window.getWindow)());
                             var dataController = this._dataController;
                             if (false === this.option(LEGACY_SCROLLING_MODE)) {
-                                dataController.viewportHeight(viewportHeight);
+                                this._updateViewportSize(viewportHeight);
                                 dataController.updateViewport()
                             } else {
                                 dataController.viewportSize(Math.ceil(viewportHeight / this._rowHeight))
@@ -124112,9 +124247,9 @@
                                         }
                                         return null === dataSource || void 0 === dataSource ? void 0 : dataSource.viewportSize.apply(dataSource, arguments)
                                     },
-                                    viewportHeight: function(height) {
+                                    viewportHeight: function(height, scrollTop) {
                                         var _this$_rowsScrollCont;
-                                        null === (_this$_rowsScrollCont = this._rowsScrollController) || void 0 === _this$_rowsScrollCont ? void 0 : _this$_rowsScrollCont.viewportHeight(height)
+                                        null === (_this$_rowsScrollCont = this._rowsScrollController) || void 0 === _this$_rowsScrollCont ? void 0 : _this$_rowsScrollCont.viewportHeight(height, scrollTop)
                                     },
                                     viewportItemSize: function() {
                                         var rowsScrollController = this._rowsScrollController;
@@ -124406,6 +124541,17 @@
                                 return members
                             }(),
                             resizing: {
+                                _updateMasterDataGridCore: function(masterDataGrid) {
+                                    return (0, _deferred.when)(this.callBase.apply(this, arguments)).done((function(masterDataGridUpdated) {
+                                        var isNewVirtualMode = isVirtualMode(masterDataGrid) && false === masterDataGrid.option(LEGACY_SCROLLING_MODE);
+                                        if (!masterDataGridUpdated && isNewVirtualMode) {
+                                            var scrollable = masterDataGrid.getScrollable();
+                                            if (scrollable) {
+                                                masterDataGrid.updateDimensions()
+                                            }
+                                        }
+                                    }))
+                                },
                                 resize: function() {
                                     var that = this;
                                     var callBase = that.callBase;
@@ -124623,7 +124769,7 @@
                         getViewportPosition: function() {
                             return this._position
                         },
-                        getItemIndexByPosition: function(position) {
+                        getItemIndexByPosition: function(position, viewportItemIndex, height) {
                             var _position;
                             position = null !== (_position = position) && void 0 !== _position ? _position : this._position;
                             var defaultItemSize = this.getItemSize();
@@ -124635,6 +124781,9 @@
                                 var itemOffsetDiff = (position - offset) / defaultItemSize;
                                 if (itemOffsetWithSize < 0 || itemOffset + itemOffsetDiff < itemOffsetWithSize) {
                                     itemOffset += itemOffsetDiff;
+                                    if (this._sizeRatio < 1 && (0, _type.isDefined)(viewportItemIndex)) {
+                                        itemOffset = viewportItemIndex + height / this._viewportItemSize
+                                    }
                                     break
                                 } else {
                                     itemOffsetDiff = itemOffsetWithSize - itemOffset;
@@ -124737,12 +124886,13 @@
                             }
                             return this._viewportSize
                         },
-                        viewportHeight: function(height) {
-                            var begin = this.getItemIndexByPosition();
-                            var end = this.getItemIndexByPosition(this._position + height);
+                        viewportHeight: function(height, scrollTop) {
+                            var position = null !== scrollTop && void 0 !== scrollTop ? scrollTop : this._position;
+                            var begin = this.getItemIndexByPosition(position);
+                            var end = this.getItemIndexByPosition(position + height, begin, height);
                             this.viewportSize(Math.ceil(end - begin));
-                            if (this._viewportItemIndex !== begin) {
-                                this._setViewportPositionCore(this._position)
+                            if (!(0, _type.isDefined)(scrollTop) && this._viewportItemIndex !== begin) {
+                                this._setViewportPositionCore(position)
                             }
                         },
                         reset: function(isRefresh) {
@@ -130361,7 +130511,7 @@
                     var backgroundColorEditorInstance;
                     var $table = $element;
                     var editorInstance = module.editorInstance;
-                    var startTableWidth = (0, _type.isDefined)(formats.tableWidth) ? parseInt(formats.tableWidth) : (0, _size.getOuterWidth)($table);
+                    var startTableWidth = parseInt(formats.tableWidth) || (0, _size.getOuterWidth)($table);
                     var tableStyles = window.getComputedStyle($table.get(0));
                     var startTextAlign = "start" === tableStyles.textAlign ? "left" : tableStyles.textAlign;
                     var formOptions = {
@@ -133912,7 +134062,8 @@
                             templatesRenderAsynchronously: false,
                             hideTopOverlayHandler: null,
                             resizeEnabled: false,
-                            focusStateEnabled: false
+                            focusStateEnabled: false,
+                            propagateOutsideClick: true
                         })
                     },
                     _defaultOptionsRules: function() {
@@ -138732,7 +138883,9 @@
                         var format = this.option("format");
                         var isCustomParser = (0, _type.isFunction)(null === format || void 0 === format ? void 0 : format.parser);
                         var isLDMLPattern = (0, _type.isString)(format) && (format.indexOf("0") >= 0 || format.indexOf("#") >= 0);
-                        this._currentFormat = isCustomParser || isLDMLPattern ? format : (0, _number2.getFormat)((function(value) {
+                        var isExponentialFormat = "exponential" === format || "exponential" === (null === format || void 0 === format ? void 0 : format.type);
+                        var shouldUseFormatAsIs = isCustomParser || isLDMLPattern || isExponentialFormat;
+                        this._currentFormat = shouldUseFormatAsIs ? format : (0, _number2.getFormat)((function(value) {
                             var text = _this._format(value, format);
                             return _number.default.convertDigits(text, true)
                         }))
@@ -140415,13 +140568,34 @@
                             this._showingDeferred.resolve()
                         } else {
                             var show = function() {
-                                _this10._renderVisibility(true);
-                                if (_this10._isShowingActionCanceled) {
-                                    delete _this10._isShowingActionCanceled;
-                                    _this10._showingDeferred.resolve();
-                                    return
+                                _this10._stopAnimation();
+                                _this10._toggleVisibility(true);
+                                _this10._$content.css("visibility", "hidden");
+                                _this10._$content.toggleClass("dx-state-invisible", false);
+                                _this10._updateZIndexStackPosition(true);
+                                _this10._positionController.openingHandled();
+                                _this10._renderContent();
+                                var showingArgs = {
+                                    cancel: false
+                                };
+                                _this10._actions.onShowing(showingArgs);
+                                if (showingArgs.cancel) {
+                                    ! function() {
+                                        _this10._toggleVisibility(false);
+                                        _this10._$content.css("visibility", "");
+                                        _this10._$content.toggleClass("dx-state-invisible", true);
+                                        _this10._isShowingActionCanceled = true;
+                                        _this10._moveFromContainer();
+                                        _this10.option("visible", false);
+                                        _this10._showingDeferred.resolve()
+                                    }()
+                                } else {
+                                    ! function() {
+                                        _this10._$content.css("visibility", "");
+                                        _this10._renderVisibility(true);
+                                        _this10._animateShowing()
+                                    }()
                                 }
-                                _this10._animateShowing()
                             };
                             if (this.option("templatesRenderAsynchronously")) {
                                 this._stopShowTimer();
@@ -140473,6 +140647,7 @@
                         }))
                     },
                     _hide: function() {
+                        var _this12 = this;
                         if (!this._currentVisible) {
                             return (new _deferred.Deferred).resolve().promise()
                         }
@@ -140487,15 +140662,19 @@
                             this._actions.onHiding(hidingArgs);
                             this._toggleSafariScrolling();
                             if (hidingArgs.cancel) {
-                                this._isHidingActionCanceled = true;
-                                this.option("visible", true);
-                                this._hidingDeferred.resolve()
+                                ! function() {
+                                    _this12._isHidingActionCanceled = true;
+                                    _this12.option("visible", true);
+                                    _this12._hidingDeferred.resolve()
+                                }()
                             } else {
-                                this._forceFocusLost();
-                                this._toggleShading(false);
-                                this._toggleSubscriptions(false);
-                                this._stopShowTimer();
-                                this._animateHiding()
+                                ! function() {
+                                    _this12._forceFocusLost();
+                                    _this12._toggleShading(false);
+                                    _this12._toggleSubscriptions(false);
+                                    _this12._stopShowTimer();
+                                    _this12._animateHiding()
+                                }()
                             }
                         }
                         return this._hidingDeferred.promise()
@@ -140530,30 +140709,15 @@
                         if (!visible) {
                             (0, _visibility_change.triggerHidingEvent)(this._$content)
                         }
-                        this._toggleVisibility(visible);
-                        this._$content.toggleClass("dx-state-invisible", !visible);
-                        this._updateZIndexStackPosition(visible);
                         if (visible) {
-                            this._positionController.openingHandled();
-                            this._renderContent();
-                            var showingArgs = {
-                                cancel: false
-                            };
-                            this._actions.onShowing(showingArgs);
-                            if (showingArgs.cancel) {
-                                this._toggleVisibility(false);
-                                this._$content.toggleClass("dx-state-invisible", true);
-                                this._updateZIndexStackPosition(false);
-                                this._moveFromContainer();
-                                this._isShowingActionCanceled = true;
-                                this.option("visible", false);
-                                return
-                            }
                             this._moveToContainer();
                             this._renderGeometry();
                             (0, _visibility_change.triggerShownEvent)(this._$content);
                             (0, _visibility_change.triggerResizeEvent)(this._$content)
                         } else {
+                            this._toggleVisibility(visible);
+                            this._$content.toggleClass("dx-state-invisible", !visible);
+                            this._updateZIndexStackPosition(visible);
                             this._moveFromContainer()
                         }
                         this._toggleShading(visible);
@@ -140581,9 +140745,9 @@
                         this._toggleTabTerminator(visible && this.option("shading"))
                     },
                     _initTabTerminatorHandler: function() {
-                        var _this12 = this;
+                        var _this13 = this;
                         this._proxiedTabTerminatorHandler = function() {
-                            _this12._tabKeyHandler.apply(_this12, arguments)
+                            _this13._tabKeyHandler.apply(_this13, arguments)
                         }
                     },
                     _toggleTabTerminator: function(enabled) {
@@ -140724,7 +140888,7 @@
                         return isHidden || !_dom_adapter.default.getBody().contains($parent.get(0))
                     },
                     _renderContentImpl: function() {
-                        var _this13 = this;
+                        var _this14 = this;
                         var whenContentRendered = new _deferred.Deferred;
                         var contentTemplateOption = this.option("contentTemplate");
                         var contentTemplate = this._getTemplate(contentTemplateOption);
@@ -140741,8 +140905,8 @@
                         this._renderResize();
                         this._renderScrollTerminator();
                         whenContentRendered.done((function() {
-                            if (_this13.option("visible")) {
-                                _this13._moveToContainer()
+                            if (_this14.option("visible")) {
+                                _this14._moveToContainer()
                             }
                         }));
                         return whenContentRendered.promise()
@@ -140792,19 +140956,19 @@
                         }
                     },
                     _renderResize: function() {
-                        var _this14 = this;
+                        var _this15 = this;
                         this._resizable = this._createComponent(this._$content, _resizable.default, {
                             handles: this.option("resizeEnabled") ? "all" : "none",
                             onResizeEnd: function(e) {
-                                _this14._resizeEndHandler(e);
-                                _this14._observeContentResize(true)
+                                _this15._resizeEndHandler(e);
+                                _this15._observeContentResize(true)
                             },
                             onResize: function(e) {
-                                _this14._actions.onResize(e)
+                                _this15._actions.onResize(e)
                             },
                             onResizeStart: function(e) {
-                                _this14._observeContentResize(false);
-                                _this14._actions.onResizeStart(e)
+                                _this15._observeContentResize(false);
+                                _this15._actions.onResizeStart(e)
                             },
                             minHeight: 100,
                             minWidth: 100,
@@ -140971,9 +141135,9 @@
                         return this._$content
                     },
                     _attachKeyboardEvents: function() {
-                        var _this15 = this;
+                        var _this16 = this;
                         this._keyboardListenerId = _short.keyboard.on(this._$content, null, (function(opts) {
-                            return _this15._keyboardHandler(opts)
+                            return _this16._keyboardHandler(opts)
                         }))
                     },
                     _keyboardHandler: function(options) {
@@ -141032,7 +141196,7 @@
                         this._$content.toggleClass("dx-rtl", rtl)
                     },
                     _optionChanged: function(args) {
-                        var _this$_resizable, _this16 = this;
+                        var _this$_resizable, _this17 = this;
                         var value = args.value;
                         if ((0, _array.inArray)(args.name, ACTIONS) > -1) {
                             this._initActions();
@@ -141073,10 +141237,10 @@
                                 break;
                             case "visible":
                                 this._renderVisibilityAnimate(value).done((function() {
-                                    if (!_this16._animateDeferred) {
+                                    if (!_this17._animateDeferred) {
                                         return
                                     }
-                                    _this16._animateDeferred.resolveWith(_this16)
+                                    _this17._animateDeferred.resolveWith(_this17)
                                 }));
                                 break;
                             case "target":
@@ -141150,7 +141314,7 @@
                         }
                     },
                     toggle: function(showing) {
-                        var _this17 = this;
+                        var _this18 = this;
                         showing = void 0 === showing ? !this.option("visible") : showing;
                         var result = new _deferred.Deferred;
                         if (showing === this.option("visible")) {
@@ -141160,8 +141324,8 @@
                         this._animateDeferred = animateDeferred;
                         this.option("visible", showing);
                         animateDeferred.promise().done((function() {
-                            delete _this17._animateDeferred;
-                            result.resolveWith(_this17, [_this17.option("visible")])
+                            delete _this18._animateDeferred;
+                            result.resolveWith(_this18, [_this18.option("visible")])
                         }));
                         return result.promise()
                     },
@@ -150623,6 +150787,7 @@
                                 },
                                 hide: {
                                     type: "fade",
+                                    from: 1,
                                     to: 0
                                 }
                             },
@@ -154806,9 +154971,11 @@
                                 return
                             }
                             var adapter = _this4._createAppointmentAdapter(_this4.form.formData);
-                            var appointment = adapter.clone({
+                            var clonedAdapter = adapter.clone({
                                 pathTimeZone: "fromAppointment"
-                            }).source();
+                            });
+                            _this4._addMissingDSTTime(adapter, clonedAdapter);
+                            var appointment = clonedAdapter.source();
                             delete appointment.repeat;
                             switch (_this4.state.action) {
                                 case ACTION_TO_APPOINTMENT.CREATE:
@@ -154878,6 +155045,20 @@
                     _proto._unlockSaveChanges = function() {
                         this.state.saveChangesLocker = false
                     };
+                    _proto._addMissingDSTTime = function(formAppointmentAdapter, clonedAppointmentAdapter) {
+                        var timeZoneCalculator = this.scheduler.getTimeZoneCalculator();
+                        clonedAppointmentAdapter.startDate = this._addMissingDSTShiftToDate(timeZoneCalculator, formAppointmentAdapter.startDate, clonedAppointmentAdapter.startDate);
+                        if (clonedAppointmentAdapter.endDate) {
+                            clonedAppointmentAdapter.endDate = this._addMissingDSTShiftToDate(timeZoneCalculator, formAppointmentAdapter.endDate, clonedAppointmentAdapter.endDate)
+                        }
+                    };
+                    _proto._addMissingDSTShiftToDate = function(timeZoneCalculator, originFormDate, clonedDate) {
+                        var _timeZoneCalculator$g, _timeZoneCalculator$g2;
+                        var originTimezoneShift = null === (_timeZoneCalculator$g = timeZoneCalculator.getOffsets(originFormDate)) || void 0 === _timeZoneCalculator$g ? void 0 : _timeZoneCalculator$g.common;
+                        var clonedTimezoneShift = null === (_timeZoneCalculator$g2 = timeZoneCalculator.getOffsets(clonedDate)) || void 0 === _timeZoneCalculator$g2 ? void 0 : _timeZoneCalculator$g2.common;
+                        var shiftDifference = originTimezoneShift - clonedTimezoneShift;
+                        return shiftDifference ? new Date(clonedDate.getTime() + shiftDifference * toMs("hour")) : clonedDate
+                    };
                     ! function(Constructor, protoProps, staticProps) {
                         if (protoProps) {
                             _defineProperties(Constructor.prototype, protoProps)
@@ -162888,27 +163069,55 @@
                     }
                     var _proto = RecurrenceProcessor.prototype;
                     _proto.generateDates = function(options) {
+                        var _this = this;
                         var recurrenceRule = this.evalRecurrenceRule(options.rule);
                         var rule = recurrenceRule.rule;
                         if (!recurrenceRule.isValid || !rule.freq) {
                             return []
                         }
-                        var clientOffsets_startDate = _utils.default.getClientTimezoneOffset(options.start),
-                            clientOffsets_minViewDate = _utils.default.getClientTimezoneOffset(options.min),
-                            clientOffsets_maxViewDate = _utils.default.getClientTimezoneOffset(options.max);
-                        var appointmentOffset = options.appointmentTimezoneOffset;
-                        var duration = options.end ? options.end.getTime() - options.start.getTime() : 0;
-                        var startDate = _utils.default.setOffsetsToDate(options.start, [-clientOffsets_startDate, appointmentOffset]);
-                        var minViewTime = options.min.getTime() - clientOffsets_minViewDate + appointmentOffset;
-                        var minViewDate = new Date(minViewTime - duration);
-                        var maxViewDate = _utils.default.setOffsetsToDate(options.max, [-clientOffsets_maxViewDate, appointmentOffset]);
-                        this._initializeRRule(options, startDate, rule.until);
-                        return this.rRuleSet.between(minViewDate, maxViewDate, true).filter((function(date) {
-                            return date.getTime() + duration >= minViewTime
+                        var rruleIntervalParams = this._createRruleIntervalParams(options);
+                        this._initializeRRule(options, rruleIntervalParams.startIntervalDate, rule.until);
+                        return this.rRuleSet.between(rruleIntervalParams.minViewDate, rruleIntervalParams.maxViewDate, true).filter((function(date) {
+                            return date.getTime() + rruleIntervalParams.appointmentDuration >= rruleIntervalParams.minViewTime
                         })).map((function(date) {
-                            return _utils.default.setOffsetsToDate(date, [_utils.default.getClientTimezoneOffset(date), -appointmentOffset])
+                            return _this._convertRruleResult(rruleIntervalParams, options, date)
                         }))
                     };
+                    _proto._createRruleIntervalParams = function(options) {
+                        var start = options.start,
+                            min = options.min,
+                            max = options.max,
+                            appointmentTimezoneOffset = options.appointmentTimezoneOffset;
+                        var clientOffsets_startDate = _utils.default.getClientTimezoneOffset(start),
+                            clientOffsets_minViewDate = _utils.default.getClientTimezoneOffset(min),
+                            clientOffsets_maxViewDate = _utils.default.getClientTimezoneOffset(max);
+                        var duration = options.end ? options.end.getTime() - options.start.getTime() : 0;
+                        var startIntervalDate = _utils.default.setOffsetsToDate(options.start, [-clientOffsets_startDate, appointmentTimezoneOffset]);
+                        var minViewTime = options.min.getTime() - clientOffsets_minViewDate + appointmentTimezoneOffset;
+                        var minViewDate = new Date(minViewTime - duration);
+                        var maxViewDate = _utils.default.setOffsetsToDate(options.max, [-clientOffsets_maxViewDate, appointmentTimezoneOffset]);
+                        var startDateDSTDifferenceMs = _utils.default.getDiffBetweenClientTimezoneOffsets(options.start, startIntervalDate);
+                        var switchToSummerTime = startDateDSTDifferenceMs < 0;
+                        return {
+                            startIntervalDate: startIntervalDate,
+                            minViewTime: minViewTime,
+                            minViewDate: minViewDate,
+                            maxViewDate: maxViewDate,
+                            startIntervalDateDSTShift: switchToSummerTime ? 0 : startDateDSTDifferenceMs,
+                            appointmentDuration: duration
+                        }
+                    };
+                    _proto._convertRruleResult = function(rruleIntervalParams, options, rruleDate) {
+                        var convertedBackDate = _utils.default.setOffsetsToDate(rruleDate, [_utils.default.getClientTimezoneOffset(rruleDate), -options.appointmentTimezoneOffset, rruleIntervalParams.startIntervalDateDSTShift]);
+                        var convertedDateDSTShift = _utils.default.getDiffBetweenClientTimezoneOffsets(convertedBackDate, rruleDate);
+                        var switchToSummerTime = convertedDateDSTShift < 0;
+                        var resultDate = _utils.default.setOffsetsToDate(convertedBackDate, [convertedDateDSTShift]);
+                        var resultDateDSTShift = _utils.default.getDiffBetweenClientTimezoneOffsets(resultDate, convertedBackDate);
+                        if (resultDateDSTShift && switchToSummerTime) {
+                            return new Date(resultDate.getTime() + resultDateDSTShift)
+                        }
+                        return resultDate
+                    };
                     _proto.hasRecurrence = function(options) {
                         return !!this.generateDates(options).length
                     };
@@ -163004,7 +163213,7 @@
                         return (new Date).getTimezoneOffset()
                     };
                     _proto._initializeRRule = function(options, startDateUtc, until) {
-                        var _this = this;
+                        var _this2 = this;
                         var ruleOptions = _rrule.RRule.parseString(options.rule);
                         var firstDayOfWeek = options.firstDayOfWeek;
                         ruleOptions.dtstart = startDateUtc;
@@ -163018,19 +163227,14 @@
                         if (options.exception) {
                             var exceptionStrings = options.exception;
                             var exceptionDates = exceptionStrings.split(",").map((function(rule) {
-                                return _this.getDateByAsciiString(rule)
+                                return _this2.getDateByAsciiString(rule)
                             }));
                             exceptionDates.forEach((function(date) {
                                 if (options.getPostProcessedException) {
                                     date = options.getPostProcessedException(date)
                                 }
                                 var utcDate = _utils.default.setOffsetsToDate(date, [-_utils.default.getClientTimezoneOffset(date), options.appointmentTimezoneOffset]);
-                                var originClientOffset = date.getTimezoneOffset();
-                                var utcDateClientOffset = utcDate.getTimezoneOffset();
-                                if (utcDateClientOffset !== originClientOffset) {
-                                    utcDate.setMilliseconds(utcDate.getMilliseconds() - 6e4 * (utcDateClientOffset - originClientOffset))
-                                }
-                                _this.rRuleSet.exdate(utcDate)
+                                _this2.rRuleSet.exdate(utcDate)
                             }))
                         }
                     };
@@ -169471,6 +169675,7 @@
                                     _this2._filterAppointmentsByDate();
                                     _this2._appointments.option("allowAllDayResize", "day" !== value)
                                 }));
+                                this.postponedOperations.callPostponedOperations();
                                 break;
                             case "appointmentTemplate":
                                 this._appointments.option("itemTemplate", value);
@@ -169489,7 +169694,7 @@
                                 break;
                             case "resources":
                                 this._dataAccessors.resources = (0, _utils3.createExpressions)(this.option("resources"));
-                                this.agendaResourceProcessor.initializeState(value);
+                                this.agendaResourceProcessor.initializeState(this.option("resources"));
                                 this.updateInstances();
                                 this._postponeResourceLoading().done((function(resources) {
                                     _this2._appointments.option("items", []);
@@ -171313,6 +171518,10 @@
                     var endDayDate = new Date(new Date(date).setHours(23, 59, 59, 0));
                     return startDayDate.getTimezoneOffset() - endDayDate.getTimezoneOffset() !== 0
                 };
+                var getClientTimezoneOffset = function() {
+                    var date = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : new Date;
+                    return 6e4 * date.getTimezoneOffset()
+                };
                 var hasDSTInLocalTimeZone = function() {
                     var _getExtremeDates = getExtremeDates(),
                         _getExtremeDates2 = _slicedToArray(_getExtremeDates, 2),
@@ -171395,9 +171604,11 @@
                         }
                         return new Date(exception.getTime() + (isBackConversion ? -1 : 1) * timezoneOffset * toMs("hour"))
                     },
-                    getClientTimezoneOffset: function() {
-                        var date = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : new Date;
-                        return 6e4 * date.getTimezoneOffset()
+                    getClientTimezoneOffset: getClientTimezoneOffset,
+                    getDiffBetweenClientTimezoneOffsets: function() {
+                        var firstDate = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : new Date;
+                        var secondDate = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : new Date;
+                        return getClientTimezoneOffset(firstDate) - getClientTimezoneOffset(secondDate)
                     },
                     createUTCDateWithLocalOffset: function(date) {
                         if (!date) {
@@ -171440,12 +171651,10 @@
                         return _utils.default.getDisplayedTimeZones(dateInUTC.getTime())
                     },
                     setOffsetsToDate: function(targetDate, offsetsArray) {
-                        var dateCopy = new Date(targetDate);
-                        var offsetToAdd = offsetsArray.reduce((function(result, offset) {
+                        var newDateMs = offsetsArray.reduce((function(result, offset) {
                             return result + offset
-                        }), 0);
-                        dateCopy.setMilliseconds(dateCopy.getMilliseconds() + offsetToAdd);
-                        return dateCopy
+                        }), targetDate.getTime());
+                        return new Date(newDateMs)
                     }
                 };
                 var _default = utils;
@@ -174530,6 +174739,74 @@
                 var _cache = __webpack_require__( /*! ./cache */ 56012);
                 var _classes = __webpack_require__( /*! ../classes */ 62060);
                 var _base = __webpack_require__( /*! ../../../renovation/ui/scheduler/view_model/to_test/views/utils/base */ 45985);
+
+                function _slicedToArray(arr, i) {
+                    return function(arr) {
+                        if (Array.isArray(arr)) {
+                            return arr
+                        }
+                    }(arr) || function(arr, i) {
+                        var _i = null == arr ? null : "undefined" !== typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+                        if (null == _i) {
+                            return
+                        }
+                        var _arr = [];
+                        var _n = true;
+                        var _d = false;
+                        var _s, _e;
+                        try {
+                            for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+                                _arr.push(_s.value);
+                                if (i && _arr.length === i) {
+                                    break
+                                }
+                            }
+                        } catch (err) {
+                            _d = true;
+                            _e = err
+                        } finally {
+                            try {
+                                if (!_n && null != _i.return) {
+                                    _i.return()
+                                }
+                            } finally {
+                                if (_d) {
+                                    throw _e
+                                }
+                            }
+                        }
+                        return _arr
+                    }(arr, i) || function(o, minLen) {
+                        if (!o) {
+                            return
+                        }
+                        if ("string" === typeof o) {
+                            return _arrayLikeToArray(o, minLen)
+                        }
+                        var n = Object.prototype.toString.call(o).slice(8, -1);
+                        if ("Object" === n && o.constructor) {
+                            n = o.constructor.name
+                        }
+                        if ("Map" === n || "Set" === n) {
+                            return Array.from(o)
+                        }
+                        if ("Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) {
+                            return _arrayLikeToArray(o, minLen)
+                        }
+                    }(arr, i) || function() {
+                        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
+                    }()
+                }
+
+                function _arrayLikeToArray(arr, len) {
+                    if (null == len || len > arr.length) {
+                        len = arr.length
+                    }
+                    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+                        arr2[i] = arr[i]
+                    }
+                    return arr2
+                }
                 var VerticalGroupedStrategy = function() {
                     function VerticalGroupedStrategy(workSpace) {
                         this._workSpace = workSpace;
@@ -174584,12 +174861,12 @@
                     _proto.getLeftOffset = function() {
                         return this._workSpace.getTimePanelWidth() + this._workSpace.getGroupTableWidth()
                     };
-                    _proto.getGroupBoundsOffset = function(cellCount, $cells, cellWidth, coordinates) {
+                    _proto.getGroupBoundsOffset = function(groupIndex, _ref) {
                         var _this = this;
-                        var groupIndex = coordinates.groupIndex;
+                        var _ref2 = _slicedToArray(_ref, 2),
+                            $firstCell = _ref2[0],
+                            $lastCell = _ref2[1];
                         return this.cache.get("groupBoundsOffset".concat(groupIndex), (function() {
-                            var startOffset = $cells.eq(0).offset().left;
-                            var endOffset = $cells.eq(cellCount - 1).offset().left + cellWidth;
                             var startDayHour = _this._workSpace.option("startDayHour");
                             var endDayHour = _this._workSpace.option("endDayHour");
                             var hoursInterval = _this._workSpace.option("hoursInterval");
@@ -174600,9 +174877,13 @@
                                 topOffset += _this._workSpace.getCellHeight() * (groupIndex + 1)
                             }
                             var bottomOffset = topOffset + dayHeight;
+                            var _$firstCell$getBoundi = $firstCell.getBoundingClientRect(),
+                                left = _$firstCell$getBoundi.left;
+                            var _$lastCell$getBoundin = $lastCell.getBoundingClientRect(),
+                                right = _$lastCell$getBoundin.right;
                             return _this._groupBoundsOffset = {
-                                left: startOffset,
-                                right: endOffset,
+                                left: left,
+                                right: right,
                                 top: topOffset,
                                 bottom: bottomOffset
                             }
@@ -175892,6 +176173,11 @@
                             return this.$element().find("." + cellClass)
                         }
                     };
+                    _proto._getFirstAndLastDataTableCell = function() {
+                        var selector = this.isVirtualScrolling() ? ".".concat(DATE_TABLE_CELL_CLASS, ", .").concat(_classes.VIRTUAL_CELL_CLASS) : ".".concat(DATE_TABLE_CELL_CLASS);
+                        var $cells = this.$element().find(selector);
+                        return [$cells[0], $cells[$cells.length - 1]]
+                    };
                     _proto._getAllCells = function(allDay) {
                         if (this._isVerticalGroupedWorkSpace()) {
                             return this._$dateTable.find("td:not(.".concat(_classes.VIRTUAL_CELL_CLASS, ")"))
@@ -176102,17 +176388,26 @@
                         return this.viewDataProvider.getVisibleDayDuration(startDayHour, endDayHour, hoursInterval)
                     };
                     _proto.getGroupBounds = function(coordinates) {
+                        var groupBounds = this._groupedStrategy instanceof _uiSchedulerWork_spaceGroupedStrategy2.default ? this.getGroupBoundsVertical(coordinates.groupIndex) : this.getGroupBoundsHorizontal(coordinates);
+                        return this._isRTL() ? this.getGroupBoundsRtlCorrection(groupBounds) : groupBounds
+                    };
+                    _proto.getGroupBoundsVertical = function(groupIndex) {
+                        var $firstAndLastCells = this._getFirstAndLastDataTableCell();
+                        return this._groupedStrategy.getGroupBoundsOffset(groupIndex, $firstAndLastCells)
+                    };
+                    _proto.getGroupBoundsHorizontal = function(coordinates) {
                         var cellCount = this._getCellCount();
                         var $cells = this._getCells();
                         var cellWidth = this.getCellWidth();
                         var groupedDataMap = this.viewDataProvider.groupedDataMap;
-                        var result = this._groupedStrategy.getGroupBoundsOffset(cellCount, $cells, cellWidth, coordinates, groupedDataMap);
-                        if (this._isRTL()) {
-                            var startOffset = result.left;
-                            result.left = result.right - 2 * cellWidth;
-                            result.right = startOffset + 2 * cellWidth
-                        }
-                        return result
+                        return this._groupedStrategy.getGroupBoundsOffset(cellCount, $cells, cellWidth, coordinates, groupedDataMap)
+                    };
+                    _proto.getGroupBoundsRtlCorrection = function(groupBounds) {
+                        var cellWidth = this.getCellWidth();
+                        return _extends({}, groupBounds, {
+                            left: groupBounds.right - 2 * cellWidth,
+                            right: groupBounds.left + 2 * cellWidth
+                        })
                     };
                     _proto.needRecalculateResizableArea = function() {
                         return this._isVerticalGroupedWorkSpace() && 0 !== this.getScrollable().scrollTop()
@@ -190052,7 +190347,7 @@
                         var eventName = (0, _index.addNamespace)("mousedown", "dxTagBox");
                         _events_engine.default.off(this._inputWrapper(), eventName);
                         _events_engine.default.on(this._inputWrapper(), eventName, (function(e) {
-                            if (e.target !== _this3._input()[0]) {
+                            if (e.target !== _this3._input()[0] && _this3._isFocused()) {
                                 e.preventDefault()
                             }
                         }))
@@ -190750,12 +191045,8 @@
                     _getSortedListValues: function() {
                         var listValues = this._getListValues();
                         var currentValue = this.option("value") || [];
-                        var existedItems = listValues.length ? currentValue.filter((function(item) {
-                            return -1 !== listValues.indexOf(item)
-                        })) : [];
-                        var newItems = existedItems.length ? listValues.filter((function(item) {
-                            return -1 === currentValue.indexOf(item)
-                        })) : listValues;
+                        var existedItems = listValues.length ? (0, _array.getIntersection)(currentValue, listValues) : [];
+                        var newItems = existedItems.length ? (0, _array.removeDuplicates)(listValues, currentValue) : listValues;
                         return existedItems.concat(newItems)
                     },
                     _getListValues: function() {
@@ -190763,12 +191054,9 @@
                         if (!this._list) {
                             return []
                         }
-                        var selectedItems = this._getPlainItems(this._list.option("selectedItems"));
-                        var result = [];
-                        (0, _iterator.each)(selectedItems, (function(index, item) {
-                            result[index] = _this19._valueGetter(item)
-                        }));
-                        return result
+                        return this._getPlainItems(this._list.option("selectedItems")).map((function(item) {
+                            return _this19._valueGetter(item)
+                        }))
                     },
                     _setListDataSource: function() {
                         var currentValue = this._getValue();
@@ -190799,21 +191087,43 @@
                         delete this._valuesToUpdate;
                         delete this._tagTemplate
                     },
-                    _removeDuplicates: function(from, what) {
+                    _getSelectedItemsDifference: function(newItems, previousItems) {
                         var _this20 = this;
-                        var result = [];
-                        (0, _iterator.each)(from, (function(_, value) {
-                            var filteredItems = what.filter((function(item) {
-                                return _this20._valueGetter(value) === _this20._valueGetter(item)
-                            }));
-                            if (!filteredItems.length) {
-                                result.push(value)
+                        if (!newItems.length) {
+                            return {
+                                addedItems: [],
+                                removedItems: previousItems.slice()
+                            }
+                        }
+                        if (!previousItems.length) {
+                            return {
+                                addedItems: newItems.slice(),
+                                removedItems: []
+                            }
+                        }
+                        var previousItemsValuesMap = previousItems.reduce((function(map, item) {
+                            var value = _this20._valueGetter(item);
+                            map[value] = item;
+                            return map
+                        }), {});
+                        var addedItems = [];
+                        newItems.forEach((function(item) {
+                            var value = _this20._valueGetter(item);
+                            if (!previousItemsValuesMap[value]) {
+                                addedItems.push(item)
                             }
+                            delete previousItemsValuesMap[value]
                         }));
-                        return result
+                        return {
+                            addedItems: addedItems,
+                            removedItems: Object.values(previousItemsValuesMap)
+                        }
                     },
                     _optionChanged: function(args) {
-                        switch (args.name) {
+                        var name = args.name,
+                            value = args.value,
+                            previousValue = args.previousValue;
+                        switch (name) {
                             case "onSelectAllValueChanged":
                                 this._initSelectAllValueChangedAction();
                                 break;
@@ -190822,14 +191132,14 @@
                                 this._renderTags();
                                 break;
                             case "hideSelectedItems":
-                                if (args.value) {
+                                if (value) {
                                     this._setListDataSourceFilter()
                                 } else {
                                     this._resetListDataSourceFilter()
                                 }
                                 break;
                             case "useSubmitBehavior":
-                                this._toggleSubmitElement(args.value);
+                                this._toggleSubmitElement(value);
                                 break;
                             case "displayExpr":
                                 this.callBase(args);
@@ -190846,10 +191156,10 @@
                             case "readOnly":
                             case "disabled":
                                 this.callBase(args);
-                                !args.value && this._refreshEvents();
+                                !value && this._refreshEvents();
                                 break;
                             case "value":
-                                this._valuesToUpdate = null === args || void 0 === args ? void 0 : args.value;
+                                this._valuesToUpdate = value;
                                 this.callBase(args);
                                 this._valuesToUpdate = void 0;
                                 this._setListDataSourceFilter();
@@ -190859,18 +191169,15 @@
                                 this._renderTags();
                                 break;
                             case "selectAllMode":
-                                this._setListOption(args.name, args.value);
+                                this._setListOption(name, value);
                                 break;
                             case "selectedItem":
                                 break;
                             case "selectedItems":
-                                this._selectionChangedAction({
-                                    addedItems: this._removeDuplicates(args.value, args.previousValue),
-                                    removedItems: this._removeDuplicates(args.previousValue, args.value)
-                                });
+                                this._selectionChangedAction(this._getSelectedItemsDifference(value, previousValue));
                                 break;
                             case "multiline":
-                                this.$element().toggleClass("dx-tagbox-single-line", !args.value);
+                                this.$element().toggleClass("dx-tagbox-single-line", !value);
                                 this._renderSingleLineScroll();
                                 break;
                             case "maxFilterQueryLength":
@@ -193822,7 +194129,9 @@
                     var $container = (0, _renderer.default)(container);
                     var scrollTopPos = shiftKey ? $container.scrollLeft() : $container.scrollTop();
                     var prop = shiftKey ? "Width" : "Height";
-                    var scrollBottomPos = $container.prop("scroll".concat(prop)) - $container.prop("client".concat(prop)) - scrollTopPos;
+                    var scrollSize = $container.prop("scroll".concat(prop));
+                    var clientSize = $container.prop("client".concat(prop));
+                    var scrollBottomPos = scrollSize - clientSize - scrollTopPos | 0;
                     if (0 === scrollTopPos && 0 === scrollBottomPos) {
                         return false
                     }
@@ -194780,6 +195089,7 @@
                                 hide: {
                                     type: "fade",
                                     duration: 400,
+                                    from: 1,
                                     to: 0
                                 }
                             },
@@ -200682,6 +200992,12 @@
                         }
                     },
                     findGroup: function($element, model) {
+                        var _$element$data, _$element$data$dxComp;
+                        var hasValidationGroup = null === (_$element$data = $element.data()) || void 0 === _$element$data ? void 0 : null === (_$element$data$dxComp = _$element$data.dxComponents) || void 0 === _$element$data$dxComp ? void 0 : _$element$data$dxComp.includes("dxValidationGroup");
+                        var validationGroup = hasValidationGroup && $element.dxValidationGroup("instance");
+                        if (validationGroup) {
+                            return validationGroup
+                        }
                         var $dxGroup = $element.parents(".dx-validationgroup").first();
                         if ($dxGroup.length) {
                             return $dxGroup.dxValidationGroup("instance")
@@ -217879,6 +218195,9 @@
                     _stopCurrentHandling: _common.noop,
                     _dispose: function() {
                         var that = this;
+                        if (this._disposed) {
+                            return
+                        }
                         that.callBase.apply(that, arguments);
                         that._toggleParentsScrollSubscription(false);
                         that._removeResizeHandler();