WIP: Check with jquery 4.0.0-beta.2

apps/demos/Demos/Autocomplete/Overview/jQuery/index.js

@@ -94,7 +94,7 @@ $(() => {
   });
 
   function updateEmployeeInfo() {
-    let result = $.trim(`${firstName || ''} ${lastName || ''}`);
+    let result = `${firstName || ''} ${lastName || ''}`.trim();
 
     result += (result && position) ? (`, ${position}`) : position || '';
     result += (result && state) ? (`, ${state}`) : state || '';

apps/demos/Demos/Charts/SignalRService/signalr-hub.js

@@ -14,6 +14,8 @@
     /// <param name="$" type="jQuery" />
     "use strict";
 
+    var isFunction = function(val) { return typeof val === 'function'; };
+
     if (typeof ($.signalR) !== "function") {
         throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
     }
@@ -52,7 +54,7 @@
                     if (hub.client.hasOwnProperty(memberKey)) {
                         memberValue = hub.client[memberKey];
 
-                        if (!$.isFunction(memberValue)) {
+                        if (!isFunction(memberValue)) {
                             // Not a client hub function
                             continue;
                         }

apps/demos/Demos/DataGrid/SignalRService/signalr-hub.js

@@ -15,6 +15,8 @@
     /// <param name="$" type="jQuery" />
     "use strict";
 
+    var isFunction = function(val) { return typeof val === 'function'; };
+
     if (typeof ($.signalR) !== "function") {
         throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
     }
@@ -53,7 +55,7 @@
                     if (hub.client.hasOwnProperty(memberKey)) {
                         memberValue = hub.client[memberKey];
 
-                        if (!$.isFunction(memberValue)) {
+                        if (!isFunction(memberValue)) {
                             // Not a client hub function
                             continue;
                         }

apps/demos/package.json

@@ -50,7 +50,7 @@
         "html-react-parser": "1.4.14",
         "inferno": "^7.4.9",
         "inferno-create-element": "7.4.11",
-        "jquery": "3.6.3",
+        "jquery": "4.0.0-beta.2",
         "jspdf": "2.5.1",
         "jspdf-autotable": "3.8.3",
         "jszip": "^3.10.1",

e2e/bundlers/package.json

@@ -10,7 +10,7 @@
     "devextreme-cldr-data": "1.0.3",
     "globalize": "1.7.0",
     "cldrjs": "0.5.5",
-    "jquery": "3.7.1",
+    "jquery": "4.0.0-beta.2",
     "minimist": "1.2.8",
     "parcel": "2.12.0",
     "rimraf": "3.0.2",

e2e/compilation-cases/package.json

@@ -8,9 +8,9 @@
   },
   "devDependencies": {
     "@angular/common": "11.2.14",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.31",
     "devextreme": "workspace:*",
-    "jquery": "3.7.1",
+    "jquery": "4.0.0-beta.2",
     "typescript": "4.9.5"
   }
 }

e2e/testcafe-devextreme/package.json

@@ -9,7 +9,7 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.19.6",
     "@testcafe-community/axe": "3.5.0",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.31",
     "axe-core": "4.10.0",
     "devextreme": "workspace:~24.2.0",
     "devextreme-screenshot-comparer": "2.0.17",

packages/devextreme/build/gulp/vendor.js

@@ -19,7 +19,7 @@ const JS_VENDORS = [
         path: 'file-saver/dist/FileSaver.js'
     },
     {
-        path: 'jquery/dist/jquery.js'
+        path: 'jquery'
     },
     {
         path: 'jspdf/dist/jspdf.umd.js'

packages/devextreme/docker-ci.sh

@@ -164,7 +164,7 @@ function run_test_impl {
                 tput setaf 9
             fi
             google-chrome-stable --version
-            eval "$chrome_command ${chrome_args[@]} '$url'" &>chrome.log &
+            eval "$chrome_command ${chrome_args[@]} '$url'" &
         ;;
 
     esac

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -637,11 +637,11 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
       return this._fixedTableElement && this._getRowElements(this._fixedTableElement).eq(rowIndex).children();
     }
 
-    const columnElements: any = that.getColumnElements();
+    let columnElements: any = that.getColumnElements();
     const $transparentColumnElement = that.getTransparentColumnElement();
     if (columnElements && $transparentColumnElement && $transparentColumnElement.length) {
       const transparentColumnIndex = getTransparentColumnIndex(that.getFixedColumns());
-      columnElements.splice(transparentColumnIndex, $transparentColumnElement.get(0).colSpan, $transparentColumnElement.get(0));
+      columnElements = columnElements.slice(0, transparentColumnIndex).add(columnElements.slice(transparentColumnIndex + $transparentColumnElement.get(0).colSpan)); //$.splice
     }
 
     return columnElements;

packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts

@@ -201,7 +201,7 @@ export class SingleLineStrategy {
 
   _hideOverflowItems(width?: number) {
     // @ts-expect-error
-    const overflowItems = this._toolbar.$element().find(`.${TOOLBAR_AUTO_HIDE_ITEM_CLASS}`);
+    let overflowItems = this._toolbar.$element().find(`.${TOOLBAR_AUTO_HIDE_ITEM_CLASS}`);
 
     if (!overflowItems.length) {
       return;
@@ -216,7 +216,7 @@ export class SingleLineStrategy {
       const $item = overflowItems.eq(-1);
       $item.addClass(TOOLBAR_HIDDEN_ITEM);
       itemsWidth = this._getItemsWidth();
-      overflowItems.splice(-1, 1);
+      overflowItems = overflowItems.slice(0, -1); //$.splice
     }
   }
 

packages/devextreme/package.json

@@ -54,7 +54,7 @@
     "@devextreme-generator/vue": "3.0.12",
     "@testcafe-community/axe": "3.5.0",
     "@types/enzyme": "3.10.18",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.31",
     "@types/react": "16.14.34",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/experimental-utils": "5.62.0",
@@ -135,7 +135,7 @@
     "jest-each": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-environment-node": "26.6.2",
-    "jquery": "3.7.1",
+    "jquery": "4.0.0-beta.2",
     "jquery.tmpl": "0.0.2",
     "jspdf": "2.5.1",
     "jspdf-autotable": "3.8.3",

packages/devextreme/testing/helpers/gridBaseMocks.js

@@ -1046,7 +1046,7 @@ module.exports = function($, gridCore, columnResizingReordering, domUtils, commo
         if(options) {
             if(options.initDefaultOptions) {
                 $.each(modules, function() {
-                    if($.isFunction(this.defaultOptions)) {
+                    if(typeUtils.isFunction(this.defaultOptions)) {
                         that.option(this.defaultOptions());
                     }
                 });

packages/devextreme/testing/helpers/keyboardMock.js

@@ -242,7 +242,7 @@ let focused;
             throw Error('Unable to type text in non-editable element: ' + $element.get(0));
         }
 
-        let clock = $.now();
+        let clock = Date.now();
 
         return {
             triggerEvent: function(eventName, options) {

packages/devextreme/testing/helpers/nativePointerMock.js

@@ -40,6 +40,8 @@
         const isString = function(val) { return typeof val === 'string'; };
         const isBoolean = function(val) { return typeof val === 'boolean'; };
         const isObject = function(val) { return typeof val === 'object'; };
+        const isNumeric = function(val) { return typeof val === 'number'; };
+        const isFunction = function(val) { return typeof val === 'function'; };
 
         const MOUSE_EVENTS = {
             'click': 1,
@@ -151,11 +153,11 @@
                 metaKey = false;
             }
 
-            if(!$.isNumeric(keyCode)) {
+            if(!isNumeric(keyCode)) {
                 keyCode = 0;
             }
 
-            if(!$.isNumeric(charCode)) {
+            if(!isNumeric(charCode)) {
                 charCode = 0;
             }
 
@@ -222,23 +224,23 @@
                 view = window;
             }
 
-            if(!$.isNumeric(detail)) {
+            if(!isNumeric(detail)) {
                 detail = 1;
             }
 
-            if(!$.isNumeric(screenX)) {
+            if(!isNumeric(screenX)) {
                 screenX = 0;
             }
 
-            if(!$.isNumeric(screenY)) {
+            if(!isNumeric(screenY)) {
                 screenY = 0;
             }
 
-            if(!$.isNumeric(clientX)) {
+            if(!isNumeric(clientX)) {
                 clientX = 0;
             }
 
-            if(!$.isNumeric(clientY)) {
+            if(!isNumeric(clientY)) {
                 clientY = 0;
             }
 
@@ -258,7 +260,7 @@
                 metaKey = false;
             }
 
-            if(!$.isNumeric(button)) {
+            if(!isNumeric(button)) {
                 button = 0;
             }
 
@@ -325,10 +327,10 @@
                     if(!isObject(view)) {
                         view = window;
 
-                        if(!$.isNumeric(detail)) {
+                        if(!isNumeric(detail)) {
                             detail = 1;
 
-                            if($.isFunction(document.createEvent)) {
+                            if(isFunction(document.createEvent)) {
 
                                 customEvent = document.createEvent('UIEvents');
                                 customEvent.initUIEvent(type, bubbles, cancelable, view, detail);
@@ -366,18 +368,18 @@
             if(!isBoolean(bubbles)) { bubbles = true; }
             if(!isBoolean(cancelable)) { cancelable = true; }
             if(!isObject(view)) { view = window; }
-            if(!$.isNumeric(detail)) { detail = 2; }
-            if(!$.isNumeric(screenX)) { screenX = 0; }
-            if(!$.isNumeric(screenY)) { screenY = 0; }
-            if(!$.isNumeric(clientX)) { clientX = 0; }
-            if(!$.isNumeric(clientY)) { clientY = 0; }
+            if(!isNumeric(detail)) { detail = 2; }
+            if(!isNumeric(screenX)) { screenX = 0; }
+            if(!isNumeric(screenY)) { screenY = 0; }
+            if(!isNumeric(clientX)) { clientX = 0; }
+            if(!isNumeric(clientY)) { clientY = 0; }
             if(!isBoolean(ctrlKey)) { ctrlKey = false; }
             if(!isBoolean(altKey)) { altKey = false; }
             if(!isBoolean(shiftKey)) { shiftKey = false; }
             if(!isBoolean(metaKey)) { metaKey = false; }
 
-            if(!$.isNumeric(scale)) { scale = 1.0; }
-            if(!$.isNumeric(rotation)) { rotation = 0.0; }
+            if(!isNumeric(scale)) { scale = 1.0; }
+            if(!isNumeric(rotation)) { rotation = 0.0; }
 
             const customEvent = document.createEvent('GestureEvent');
 
@@ -421,17 +423,17 @@
                 cancelable = (type !== 'touchcancel');
             }
             if(!isObject(view)) { view = window; }
-            if(!$.isNumeric(detail)) { detail = 1; }
-            if(!$.isNumeric(screenX)) { screenX = 0; }
-            if(!$.isNumeric(screenY)) { screenY = 0; }
-            if(!$.isNumeric(clientX)) { clientX = 0; }
-            if(!$.isNumeric(clientY)) { clientY = 0; }
+            if(!isNumeric(detail)) { detail = 1; }
+            if(!isNumeric(screenX)) { screenX = 0; }
+            if(!isNumeric(screenY)) { screenY = 0; }
+            if(!isNumeric(clientX)) { clientX = 0; }
+            if(!isNumeric(clientY)) { clientY = 0; }
             if(!isBoolean(ctrlKey)) { ctrlKey = false; }
             if(!isBoolean(altKey)) { altKey = false; }
             if(!isBoolean(shiftKey)) { shiftKey = false; }
             if(!isBoolean(metaKey)) { metaKey = false; }
-            if(!$.isNumeric(scale)) { scale = 1.0; }
-            if(!$.isNumeric(rotation)) { rotation = 0.0; }
+            if(!isNumeric(scale)) { scale = 1.0; }
+            if(!isNumeric(rotation)) { rotation = 0.0; }
 
             if(UA.android && !UA.chrome) {
                 customEvent = document.createEvent('MouseEvents');
@@ -450,7 +452,7 @@
                     const createTouchByOptions = function(options) {
                         return new window.Touch({
                             target: options.target || document.body,
-                            identifier: options.identifier || $.now(),
+                            identifier: options.identifier || Date.now(),
                             pageX: options.pageX || 0,
                             pageY: options.pageY || 0,
                             screenX: options.screenX || 0,
@@ -605,7 +607,7 @@
                 // on the surface until it is lifted off the surface.
                 //
                 // values: unique ID of the Touch object
-                identifier: $.now(), // The value for Touch.identifier
+                identifier: Date.now(), // The value for Touch.identifier
 
                 // Coordinates of the touch point relative to the viewport,
                 // including any scroll offset.
@@ -806,7 +808,7 @@
                 _y = 0;
                 _scrollTop = 0;
                 _scrollLeft = 0;
-                _clock = $.now();
+                _clock = Date.now();
                 return this;
             },
 
@@ -921,7 +923,7 @@
             },
 
             move: function(x, y) {
-                if($.isArray(x)) {
+                if(Array.isArray(x)) {
                     this.move.apply(this, x);
                 } else {
                     this.touchMove(x, y);

packages/devextreme/testing/helpers/pointerMock.js

@@ -58,7 +58,7 @@
                     _y = params.y;
                     _scrollTop = params.scrollTop || 0;
                     _scrollLeft = params.scrollLeft || 0;
-                    _clock = params.clock || $.now();
+                    _clock = params.clock || Date.now();
                     _shiftKey = params.shiftKey || false;
                     _cancelable = params.cancelable;
                     _pointerType = params.pointerType || _pointerType;
@@ -67,7 +67,7 @@
                     _y = 0;
                     _scrollTop = 0;
                     _scrollLeft = 0;
-                    _clock = $.now();
+                    _clock = Date.now();
                     _shiftKey = false;
                     _pointerType = params || _pointerType;
                 }
@@ -87,7 +87,7 @@
             },
 
             move: function(x, y) {
-                if($.isArray(x)) {
+                if(Array.isArray(x)) {
                     this.move.apply(this, x);
                 } else {
                     _x += x || 0;