refactor(core)!: drop SortableJS dependency

demos/aurelia/test/cypress/support/commands.ts

@@ -25,26 +25,27 @@
 // -- This will overwrite an existing command --
 import '@4tw/cypress-drag-drop';
 import 'cypress-real-events';
+import './drag';
 import { convertPosition } from './common';
 
 declare global {
   // oxlint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;
@@ -74,7 +75,7 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS
     `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})`
   );
 });
-const LOCAL_STORAGE_MEMORY: any = {};
+const LOCAL_STORAGE_MEMORY: Record<string, string> = {};
 
 Cypress.Commands.add('saveLocalStorage', () => {
   Object.keys(localStorage).forEach((key) => {

demos/aurelia/test/cypress/support/drag.ts

@@ -6,6 +6,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
+      drag(target: string | HTMLElement | JQuery<HTMLElement>, options?: any): Chainable<any>;
       dragOutside(
         viewport?: string,
         ms?: number,
@@ -18,6 +19,53 @@ declare global {
     }
   }
 }
+
+Cypress.Commands.overwrite('drag', (_originalFn: any, subject: any, target: any, _options: any = {}) => {
+  return cy.wrap(subject as JQuery<HTMLElement>).then(($source) => {
+    const rawSourceElm = $source?.[0] as HTMLElement | undefined;
+    const rawTargetElm =
+      typeof target === 'string'
+        ? (Cypress.$(target).first()?.[0] as HTMLElement | undefined)
+        : ((target as JQuery<HTMLElement>)?.[0] as HTMLElement | undefined);
+    const sourceElm =
+      rawSourceElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawSourceElm;
+    const targetElm =
+      rawTargetElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawTargetElm;
+
+    if (!sourceElm || !targetElm) {
+      return $source;
+    }
+
+    const sourceRect = sourceElm.getBoundingClientRect();
+    const targetRect = targetElm.getBoundingClientRect();
+    const sourceX = Number.isFinite(sourceRect.left + sourceRect.width / 2) ? sourceRect.left + sourceRect.width / 2 : 0;
+    const sourceY = Number.isFinite(sourceRect.top + sourceRect.height / 2) ? sourceRect.top + sourceRect.height / 2 : 0;
+    const targetX = Number.isFinite(targetRect.left + targetRect.width / 2) ? targetRect.left + targetRect.width / 2 : 0;
+    const targetY = Number.isFinite(targetRect.top + targetRect.height / 2) ? targetRect.top + targetRect.height / 2 : 0;
+
+    const dataTransfer = new DataTransfer();
+    const createDragLikeEvent = (eventName: string, x: number, y: number): Event => {
+      const evt = new Event(eventName, { bubbles: true, cancelable: true });
+      Object.defineProperty(evt, 'dataTransfer', { value: dataTransfer });
+      Object.defineProperty(evt, 'clientX', { value: x });
+      Object.defineProperty(evt, 'clientY', { value: y });
+      Object.defineProperty(evt, 'pageX', { value: x });
+      Object.defineProperty(evt, 'pageY', { value: y });
+      Object.defineProperty(evt, 'screenX', { value: x });
+      Object.defineProperty(evt, 'screenY', { value: y });
+      return evt;
+    };
+
+    sourceElm.dispatchEvent(createDragLikeEvent('dragstart', sourceX, sourceY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragenter', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragover', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('drop', targetX, targetY));
+    sourceElm.dispatchEvent(createDragLikeEvent('dragend', targetX, targetY));
+
+    return $source;
+  });
+});
+
 // @ts-ignore
 Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, { cellWidth = 90, cellHeight = 35 } = {}) => {
   return cy

demos/react/test/cypress/support/commands.ts

@@ -25,26 +25,27 @@
 // -- This will overwrite an existing command --
 import '@4tw/cypress-drag-drop';
 import 'cypress-real-events';
+import './drag';
 import { convertPosition } from './common';
 
 declare global {
   // oxlint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;
@@ -74,7 +75,7 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS
     `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})`
   );
 });
-const LOCAL_STORAGE_MEMORY: any = {};
+const LOCAL_STORAGE_MEMORY: Record<string, string> = {};
 
 Cypress.Commands.add('saveLocalStorage', () => {
   Object.keys(localStorage).forEach((key) => {

demos/react/test/cypress/support/drag.ts

@@ -6,6 +6,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
+      drag(target: string | HTMLElement | JQuery<HTMLElement>, options?: any): Chainable<any>;
       dragOutside(
         viewport?: string,
         ms?: number,
@@ -18,6 +19,53 @@ declare global {
     }
   }
 }
+
+Cypress.Commands.overwrite('drag', (_originalFn: any, subject: any, target: any, _options: any = {}) => {
+  return cy.wrap(subject as JQuery<HTMLElement>).then(($source) => {
+    const rawSourceElm = $source?.[0] as HTMLElement | undefined;
+    const rawTargetElm =
+      typeof target === 'string'
+        ? (Cypress.$(target).first()?.[0] as HTMLElement | undefined)
+        : ((target as JQuery<HTMLElement>)?.[0] as HTMLElement | undefined);
+    const sourceElm =
+      rawSourceElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawSourceElm;
+    const targetElm =
+      rawTargetElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawTargetElm;
+
+    if (!sourceElm || !targetElm) {
+      return $source;
+    }
+
+    const sourceRect = sourceElm.getBoundingClientRect();
+    const targetRect = targetElm.getBoundingClientRect();
+    const sourceX = Number.isFinite(sourceRect.left + sourceRect.width / 2) ? sourceRect.left + sourceRect.width / 2 : 0;
+    const sourceY = Number.isFinite(sourceRect.top + sourceRect.height / 2) ? sourceRect.top + sourceRect.height / 2 : 0;
+    const targetX = Number.isFinite(targetRect.left + targetRect.width / 2) ? targetRect.left + targetRect.width / 2 : 0;
+    const targetY = Number.isFinite(targetRect.top + targetRect.height / 2) ? targetRect.top + targetRect.height / 2 : 0;
+
+    const dataTransfer = new DataTransfer();
+    const createDragLikeEvent = (eventName: string, x: number, y: number): Event => {
+      const evt = new Event(eventName, { bubbles: true, cancelable: true });
+      Object.defineProperty(evt, 'dataTransfer', { value: dataTransfer });
+      Object.defineProperty(evt, 'clientX', { value: x });
+      Object.defineProperty(evt, 'clientY', { value: y });
+      Object.defineProperty(evt, 'pageX', { value: x });
+      Object.defineProperty(evt, 'pageY', { value: y });
+      Object.defineProperty(evt, 'screenX', { value: x });
+      Object.defineProperty(evt, 'screenY', { value: y });
+      return evt;
+    };
+
+    sourceElm.dispatchEvent(createDragLikeEvent('dragstart', sourceX, sourceY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragenter', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragover', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('drop', targetX, targetY));
+    sourceElm.dispatchEvent(createDragLikeEvent('dragend', targetX, targetY));
+
+    return $source;
+  });
+});
+
 // @ts-ignore
 Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, { cellWidth = 90, cellHeight = 35 } = {}) => {
   return cy

demos/vue/test/cypress/support/commands.ts

@@ -25,26 +25,27 @@
 // -- This will overwrite an existing command --
 import '@4tw/cypress-drag-drop';
 import 'cypress-real-events';
+import './drag';
 import { convertPosition } from './common';
 
 declare global {
   // oxlint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;
@@ -74,7 +75,7 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS
     `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})`
   );
 });
-const LOCAL_STORAGE_MEMORY: any = {};
+const LOCAL_STORAGE_MEMORY: Record<string, string> = {};
 
 Cypress.Commands.add('saveLocalStorage', () => {
   Object.keys(localStorage).forEach((key) => {

demos/vue/test/cypress/support/drag.ts

@@ -6,6 +6,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
+      drag(target: string | HTMLElement | JQuery<HTMLElement>, options?: any): Chainable<any>;
       dragOutside(
         viewport?: string,
         ms?: number,
@@ -18,6 +19,53 @@ declare global {
     }
   }
 }
+
+Cypress.Commands.overwrite('drag', (_originalFn: any, subject: any, target: any, _options: any = {}) => {
+  return cy.wrap(subject as JQuery<HTMLElement>).then(($source) => {
+    const rawSourceElm = $source?.[0] as HTMLElement | undefined;
+    const rawTargetElm =
+      typeof target === 'string'
+        ? (Cypress.$(target).first()?.[0] as HTMLElement | undefined)
+        : ((target as JQuery<HTMLElement>)?.[0] as HTMLElement | undefined);
+    const sourceElm =
+      rawSourceElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawSourceElm;
+    const targetElm =
+      rawTargetElm?.closest<HTMLElement>('.slick-header-column, .slick-dropped-grouping, [draggable="true"]') ?? rawTargetElm;
+
+    if (!sourceElm || !targetElm) {
+      return $source;
+    }
+
+    const sourceRect = sourceElm.getBoundingClientRect();
+    const targetRect = targetElm.getBoundingClientRect();
+    const sourceX = Number.isFinite(sourceRect.left + sourceRect.width / 2) ? sourceRect.left + sourceRect.width / 2 : 0;
+    const sourceY = Number.isFinite(sourceRect.top + sourceRect.height / 2) ? sourceRect.top + sourceRect.height / 2 : 0;
+    const targetX = Number.isFinite(targetRect.left + targetRect.width / 2) ? targetRect.left + targetRect.width / 2 : 0;
+    const targetY = Number.isFinite(targetRect.top + targetRect.height / 2) ? targetRect.top + targetRect.height / 2 : 0;
+
+    const dataTransfer = new DataTransfer();
+    const createDragLikeEvent = (eventName: string, x: number, y: number): Event => {
+      const evt = new Event(eventName, { bubbles: true, cancelable: true });
+      Object.defineProperty(evt, 'dataTransfer', { value: dataTransfer });
+      Object.defineProperty(evt, 'clientX', { value: x });
+      Object.defineProperty(evt, 'clientY', { value: y });
+      Object.defineProperty(evt, 'pageX', { value: x });
+      Object.defineProperty(evt, 'pageY', { value: y });
+      Object.defineProperty(evt, 'screenX', { value: x });
+      Object.defineProperty(evt, 'screenY', { value: y });
+      return evt;
+    };
+
+    sourceElm.dispatchEvent(createDragLikeEvent('dragstart', sourceX, sourceY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragenter', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('dragover', targetX, targetY));
+    targetElm.dispatchEvent(createDragLikeEvent('drop', targetX, targetY));
+    sourceElm.dispatchEvent(createDragLikeEvent('dragend', targetX, targetY));
+
+    return $source;
+  });
+});
+
 // @ts-ignore
 Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, { cellWidth = 90, cellHeight = 35 } = {}) => {
   return cy

frameworks/angular-slickgrid/test/cypress/support/commands.ts

@@ -1,3 +1,4 @@
+/* eslint-disable n/file-extension-in-import */
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -24,47 +25,34 @@
 // -- This will overwrite an existing command --
 import '@4tw/cypress-drag-drop';
 import 'cypress-real-events';
+import './drag';
 import { convertPosition } from './common';
 
 declare global {
   // oxlint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       // triggerHover: (elements: NodeListOf<HTMLElement>) => void;
-      convertPosition(viewport: string): Chainable<HTMLElement | JQuery<HTMLElement> | { x: string; y: string }>;
+      convertPosition(viewport: string): Chainable<{ x: string; y: string }>;
       getCell(
         row: number,
         col: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       getNthCell(
         row: number,
         nthCol: number,
         viewport?: string,
         options?: { parentSelector?: string; rowHeight?: number }
-      ): Chainable<HTMLElement | JQuery<HTMLElement>>;
+      ): Chainable<JQuery<HTMLElement>>;
       saveLocalStorage: () => void;
       restoreLocalStorage: () => void;
       getTransformValue(cssTransformMatrix: string, absoluteValue: boolean, transformType?: 'rotate' | 'scale'): Chainable<number>;
     }
   }
 }
 
-const LOCAL_STORAGE_MEMORY: any = {};
-
-Cypress.Commands.add('saveLocalStorage', () => {
-  Object.keys(localStorage).forEach((key) => {
-    LOCAL_STORAGE_MEMORY[key] = localStorage[key];
-  });
-});
-
-Cypress.Commands.add('restoreLocalStorage', () => {
-  Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
-    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
-  });
-});
-
 // convert position like 'topLeft' to the object { x: 'left|right', y: 'top|bottom' }
 Cypress.Commands.add('convertPosition', (viewport = 'topLeft') => cy.wrap(convertPosition(viewport)));
 
@@ -87,6 +75,19 @@ Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentS
     `${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="transform: translateY(${row * rowHeight}px);"] > .slick-cell:nth(${nthCol})`
   );
 });
+const LOCAL_STORAGE_MEMORY: Record<string, string> = {};
+
+Cypress.Commands.add('saveLocalStorage', () => {
+  Object.keys(localStorage).forEach((key) => {
+    LOCAL_STORAGE_MEMORY[key] = localStorage[key];
+  });
+});
+
+Cypress.Commands.add('restoreLocalStorage', () => {
+  Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
+    localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
+  });
+});
 
 Cypress.Commands.add(
   'getTransformValue',