feat!: prepare official v4.0.0 release

.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = true

.eslintrc

@@ -1,13 +1,22 @@
 {
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:cypress/recommended"
+    ],
     "env": {
-        "browser": true
+        "browser": true,
+        "es6": true,
+        "node": true
     },
     "globals": {
-        "jQuery": true,
-        "Slick": true
+        "flatpickr": true,
+        "Slick": true,
+        "Sortable": true
     },
     "rules": {
+        "cypress/no-unnecessary-waiting": "off",
+        "cypress/unsafe-to-chain-command": "off",
+        "no-cond-assign": "off",
         "no-prototype-builtins": [0]
     }
 }

CHANGELOG.md

@@ -2,6 +2,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.0](https://github.com/6pac/SlickGrid/compare/3.0.4...4.0.0-beta.0) (2023-05-17)
+
+### Please read the [Migration Guide v4.0](https://github.com/6pac/SlickGrid/wiki/Major-version-4.0---Removal-of-jQuery-requirement)
+---
+### Bug Fixes
+
+* add missing aria accessibility ([#764](https://github.com/6pac/SlickGrid/issues/764)) ([897cc55](https://github.com/6pac/SlickGrid/commit/897cc55441625ab1bd3dd556c7c54d4796ce5f1d)), closes [#586](https://github.com/6pac/SlickGrid/issues/586) [#587](https://github.com/6pac/SlickGrid/issues/587) [#588](https://github.com/6pac/SlickGrid/issues/588) [#678](https://github.com/6pac/SlickGrid/issues/678)
+* addresses all issues found in jQuery removal previous PR [#734](https://github.com/6pac/SlickGrid/issues/734) ([#742](https://github.com/6pac/SlickGrid/issues/742)) ([b3a6575](https://github.com/6pac/SlickGrid/commit/b3a6575bd913f5b8aa0c81dfe88b71519a7a846e))
+* **core:** set wheel/touch listeners to passive for better perf ([#769](https://github.com/6pac/SlickGrid/issues/769)) ([b62e25d](https://github.com/6pac/SlickGrid/commit/b62e25d537c9a6cfb8b2004ad898b6bb0635dfd8))
+* dist source map file naming was incorrect ([#730](https://github.com/6pac/SlickGrid/issues/730)) ([aa4093a](https://github.com/6pac/SlickGrid/commit/aa4093a2b1d2afa791a645c65518fb2c35f50204))
+* enable AutoScroll with SortableJS for column reordering, fixes [#735](https://github.com/6pac/SlickGrid/issues/735) ([#736](https://github.com/6pac/SlickGrid/issues/736)) ([2c56433](https://github.com/6pac/SlickGrid/commit/2c5643313f7379877d4e4320bbe7b9de9585438c))
+* filter header row should follow grid scroll ([98aeb9b](https://github.com/6pac/SlickGrid/commit/98aeb9b9b19ca2972af214629c62efc20330b5a0))
+* scrolling for all containers should work for regular & frozen grids ([2405fe6](https://github.com/6pac/SlickGrid/commit/2405fe62b970eb84e5f24f7f5fbcb3f7b3469c78))
+* throw error when freezing columns are wider than canvas ([#773](https://github.com/6pac/SlickGrid/issues/773)) ([bc60d8a](https://github.com/6pac/SlickGrid/commit/bc60d8ac4c9ab7fffbc38420e8a6c5b7234830dd)), closes [#667](https://github.com/6pac/SlickGrid/issues/667)
+* toggling frozen rows should recalc scroll height, closes [#737](https://github.com/6pac/SlickGrid/issues/737) ([#774](https://github.com/6pac/SlickGrid/issues/774)) ([46db491](https://github.com/6pac/SlickGrid/commit/46db4914c19dd3c6789aaeed22cda91664a415fa))
+
+### Features
+
+* **controls:** remove jQuery from Slick Pager control ([#762](https://github.com/6pac/SlickGrid/issues/762)) ([ed0507b](https://github.com/6pac/SlickGrid/commit/ed0507bff30dc28f6e8b3f3ee7bf0f7339fd2282))
+* Enable hidden property for column. Adds example-column-hidden, method… ([#765](https://github.com/6pac/SlickGrid/issues/765)) ([78540ef](https://github.com/6pac/SlickGrid/commit/78540ef2339dc3d47ca2faba78b7be3963e14ad0))
+* **plugin:** convert slick.autotooltips to vanillaJS ([#745](https://github.com/6pac/SlickGrid/issues/745)) ([133d783](https://github.com/6pac/SlickGrid/commit/133d783d508e8c55d0b8196b90725079164e986d))
+* **plugins:** convert copy manager plugins to vanillaJS ([#746](https://github.com/6pac/SlickGrid/issues/746)) ([47b571d](https://github.com/6pac/SlickGrid/commit/47b571d1fc376af01cb895d19f42205c8a34ddca))
+* **plugins:** convert slick.draggablegrouping to vanillaJS ([#744](https://github.com/6pac/SlickGrid/issues/744)) ([59b0d2e](https://github.com/6pac/SlickGrid/commit/59b0d2e9f2ad549bb67982289b6c27862bab9ee1))
+* **plugins:** remove jQuery from CellMenu & ContextMenu plugins ([#753](https://github.com/6pac/SlickGrid/issues/753)) ([c4671be](https://github.com/6pac/SlickGrid/commit/c4671be7385b8bac8fdfb82769f726bf8705bf84))
+* **plugins:** remove jQuery from CheckboxSelectColumn plugins ([#755](https://github.com/6pac/SlickGrid/issues/755)) ([57160af](https://github.com/6pac/SlickGrid/commit/57160af7e5290730c0528f1cfebcaadae86820c3))
+* **plugins:** remove jQuery from ColumnPicker & GridMenu controls ([#752](https://github.com/6pac/SlickGrid/issues/752)) ([9ea0d9a](https://github.com/6pac/SlickGrid/commit/9ea0d9a7fa5a1c453e737a60cd0f1292f822ac3b))
+* **plugins:** remove jQuery from Grid Resizer plugin ([#758](https://github.com/6pac/SlickGrid/issues/758)) ([5deb818](https://github.com/6pac/SlickGrid/commit/5deb8188424f6cbc0876f4053c0dc5400212c70b))
+* **plugins:** remove jQuery from Grid State plugin ([#757](https://github.com/6pac/SlickGrid/issues/757)) ([aa8dc63](https://github.com/6pac/SlickGrid/commit/aa8dc63b3e6e635c6a6419d79a5a2a29e2b29762))
+* **plugins:** remove jQuery from header buttons/menus plugins ([#748](https://github.com/6pac/SlickGrid/issues/748)) ([58701c4](https://github.com/6pac/SlickGrid/commit/58701c4288744a1288b8cddbd9432b0d709ead30))
+* **plugins:** remove jQuery from range decorator selection model ([#754](https://github.com/6pac/SlickGrid/issues/754)) ([6724f1d](https://github.com/6pac/SlickGrid/commit/6724f1db8d2a013d999e563ffab9a35897a72afb))
+* **plugins:** remove jQuery from Row Detail plugin ([#760](https://github.com/6pac/SlickGrid/issues/760)) ([72e6139](https://github.com/6pac/SlickGrid/commit/72e61391147656151e22bc25abb583a0cba5cc89))
+* **plugins:** remove jQuery from RowMove plugins ([#756](https://github.com/6pac/SlickGrid/issues/756)) ([8c72373](https://github.com/6pac/SlickGrid/commit/8c72373e6bcab2f1972de9a774ec89bc0ed8c187))
+* **plugins:** remove jQuery from slick.customtooltip plugin ([#747](https://github.com/6pac/SlickGrid/issues/747)) ([aac6eec](https://github.com/6pac/SlickGrid/commit/aac6eecf99cfbbad7787cdbdfd95935955148fc2))
+* remove legacy TreeColumns code - now unused ([#775](https://github.com/6pac/SlickGrid/issues/775)) ([af82a57](https://github.com/6pac/SlickGrid/commit/af82a570ba79e796400fc1e2ba265ffe2dafd480))
+
 ## [3.0.4](https://github.com/6pac/SlickGrid/compare/3.0.3...3.0.4) (2023-02-15)
 
 ### Features

controls/slick.columnpicker.js

@@ -25,17 +25,18 @@
  * @constructor
  */
 
-(function ($) {
+(function (window) {
   'use strict';
   function SlickColumnPicker(columns, grid, options) {
     var _grid = grid;
     var _options = options;
     var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
-    var $columnTitleElm;
-    var $list;
-    var $menu;
+    var _columnTitleElm;
+    var _listElm;
+    var _menuElm;
     var columnCheckboxes;
     var onColumnsChanged = new Slick.Event();
+    var _bindingEventService = new Slick.BindingEventService();
 
     var defaults = {
       fadeSpeed: 250,
@@ -54,68 +55,94 @@
     function init(grid) {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
       grid.onColumnsReordered.subscribe(updateColumnOrder);
-      _options = $.extend({}, defaults, options);
-
-      $menu = $("<div class='slick-columnpicker " + _gridUid + "' style='display:none' />").appendTo(document.body);
-      $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
+      _options = Slick.Utils.extend({}, defaults, options);
+
+      _menuElm = document.createElement('div');
+      _menuElm.className = `slick-columnpicker ${_gridUid}`;
+      _menuElm.style.display = 'none';
+      document.body.appendChild(_menuElm);
+
+      const buttonElm = document.createElement('button');
+      buttonElm.type = 'button';
+      buttonElm.className = 'close';
+      buttonElm.dataset.dismiss = 'slick-columnpicker';
+      buttonElm.ariaLabel = 'Close';
+
+      const spanCloseElm = document.createElement('span');
+      spanCloseElm.className = 'close';
+      spanCloseElm.ariaHidden = 'true';
+      spanCloseElm.innerHTML = '&times;';
+      buttonElm.appendChild(spanCloseElm);
+      _menuElm.appendChild(buttonElm);
 
       // user could pass a title on top of the columns list
       if (_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) {
         var columnTitle = _options.columnPickerTitle || _options.columnPicker.columnTitle;
-        $columnTitleElm = $("<div class='title'/>").append(columnTitle);
-        $columnTitleElm.appendTo($menu);
+        _columnTitleElm = document.createElement('div');
+        _columnTitleElm.className = 'slick-gridmenu-custom';
+        _columnTitleElm.textContent = columnTitle;
+        _menuElm.appendChild(_columnTitleElm);
       }
 
-      $menu.on("click", updateColumn);
-      $list = $("<span class='slick-columnpicker-list' />");
+      _bindingEventService.bind(_menuElm, 'click', updateColumn);
+
+      _listElm = document.createElement('span');
+      _listElm.className = 'slick-columnpicker-list';
 
       // Hide the menu on outside click.
-      $(document.body).on("mousedown", handleBodyMouseDown);
+      _bindingEventService.bind(document.body, 'mousedown', handleBodyMouseDown);
 
       // destroy the picker if user leaves the page
-      $(window).on("beforeunload", destroy);
+      _bindingEventService.bind(document.body, 'beforeunload', destroy);
     }
 
     function destroy() {
       _grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
-      if ($list) {
-        $list.remove();
+      _bindingEventService.unbindAll();
+
+      if (_listElm) {
+        _listElm.remove();
       }
-      if ($menu) {
-        $menu.off("click").remove();
+      if (_menuElm) {
+        _menuElm.remove();
       }
-      $(document.body).off("mousedown", handleBodyMouseDown);
-      $(".slick-columnpicker." + _gridUid).hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
-      $columnTitleElm = null;
-      $list = null;
-      $menu = null;
-      $(window).off("beforeunload");
     }
 
     function handleBodyMouseDown(e) {
-      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) || e.target.className == "close") {
-        $menu.hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      if ((_menuElm !== e.target && !(_menuElm && _menuElm.contains(e.target))) || e.target.className === 'close') {
+        _menuElm.setAttribute('aria-expanded', 'false');
+        _menuElm.style.display = 'none';
       }
     }
 
     function handleHeaderContextMenu(e) {
       e.preventDefault();
-      $list.empty();
+      Slick.Utils.emptyElement(_listElm);
       updateColumnOrder();
       columnCheckboxes = [];
 
-      var $li, $input, columnId;
-      var columnLabel, excludeCssClass;
+      let columnId, columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
+        if (columns[i].hidden) continue;
+
         columnId = columns[i].id;
         excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : "";
-        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-" + columnId + "' />").data("column-id", columnId).appendTo($li);
-        columnCheckboxes.push($input);
+
+        const liElm = document.createElement('li');
+        liElm.className = excludeCssClass;
+        liElm.ariaLabel = columns[i] && columns[i].name;
+
+        const checkboxElm = document.createElement('input');
+        checkboxElm.type = 'checkbox';
+        checkboxElm.id = `${_gridUid}colpicker-${columnId}`;
+        checkboxElm.dataset.columnid = columns[i].id;
+        liElm.appendChild(checkboxElm);
+
+        columnCheckboxes.push(checkboxElm);
 
         if (_grid.getColumnIndex(columnId) != null) {
-          $input.attr("checked", "checked");
+          checkboxElm.checked = true;
         }
 
         if (_options && _options.columnPicker && _options.columnPicker.headerColumnValueExtractor) {
@@ -124,44 +151,74 @@
           columnLabel = defaults.headerColumnValueExtractor(columns[i], _options);
         }
 
-        $("<label for='" + _gridUid + "colpicker-" + columnId + "' />")
-          .html(columnLabel)
-          .appendTo($li);
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
+        labelElm.innerHTML = columnLabel;
+        liElm.appendChild(labelElm);
+        _listElm.appendChild(liElm);
       }
 
       if (_options.columnPicker && (!_options.columnPicker.hideForceFitButton || !_options.columnPicker.hideSyncResizeButton)) {
-        $("<hr/>").appendTo($list);
+        _listElm.appendChild(document.createElement('hr'));
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideForceFitButton)) {
-        var forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        let forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
+
+        const liElm = document.createElement('li');
+        liElm.ariaLabel = forceFitTitle;
+        _listElm.appendChild(liElm);
+
+        const forceFitCheckboxElm = document.createElement('input');
+        forceFitCheckboxElm.type = 'checkbox';
+        forceFitCheckboxElm.id = `${_gridUid}colpicker-forcefit`;
+        forceFitCheckboxElm.dataset.option = 'autoresize';
+        liElm.appendChild(forceFitCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-forcefit`;
+        labelElm.textContent = forceFitTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().forceFitColumns) {
-          $input.attr("checked", "checked");
+          forceFitCheckboxElm.checked = true;
         }
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideSyncResizeButton)) {
-        var syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        let syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
+
+        const liElm = document.createElement('li');
+        liElm.ariaLabel = syncResizeTitle;
+        _listElm.appendChild(liElm);
+
+        const syncResizeCheckboxElm = document.createElement('input');
+        syncResizeCheckboxElm.type = 'checkbox';
+        syncResizeCheckboxElm.id = `${_gridUid}colpicker-syncresize`;
+        syncResizeCheckboxElm.dataset.option = 'syncresize';
+        liElm.appendChild(syncResizeCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-syncresize`;
+        labelElm.textContent = syncResizeTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().syncColumnCellResize) {
-          $input.attr("checked", "checked");
+          syncResizeCheckboxElm.checked = true;
         }
       }
 
-      $menu
-        .css("top", e.pageY - 10)
-        .css("left", e.pageX - 10)
-        .css("max-height", $(window).height() - e.pageY - 10)
-        .fadeIn(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      repositionMenu(e);
+    }
 
-      $list.appendTo($menu);
-      $li = null;
-      $input = null;
+    function repositionMenu(event) {
+      const targetEvent = event && event.touches && event.touches[0] || event;
+      _menuElm.style.top = `${targetEvent.pageY - 10}px`;
+      _menuElm.style.left = `${targetEvent.pageX - 10}px`;
+      _menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`;
+      _menuElm.style.display = 'block';
+      _menuElm.setAttribute('aria-expanded', 'true');
+      _menuElm.appendChild(_listElm);
     }
 
     function updateColumnOrder() {
@@ -171,9 +228,9 @@
       // We create a new `columns` structure by leaving currently-hidden
       // columns in their original ordinal position and interleaving the results
       // of the current column sort.
-      var current = _grid.getColumns().slice(0);
-      var ordered = new Array(columns.length);
-      for (var i = 0; i < ordered.length; i++) {
+      let current = _grid.getColumns().slice(0);
+      let ordered = new Array(columns.length);
+      for (let i = 0; i < ordered.length; i++) {
         if (_grid.getColumnIndex(columns[i].id) === undefined) {
           // If the column doesn't return a value from getColumnIndex,
           // it is hidden. Leave it in this position.
@@ -188,13 +245,13 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if ($columnTitleElm && $columnTitleElm.text) {
-        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      if (_columnTitleElm && _columnTitleElm.innerHTML) {
+        _columnTitleElm.innerHTML = gridMenuOptions.columnTitle;
       }
     }
 
     function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
+      if (e.target.dataset.option === 'autoresize') {
         // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
         // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after
         var previousVisibleColumns = getVisibleColumns();
@@ -204,7 +261,7 @@
         return;
       }
 
-      if ($(e.target).data("option") == "syncresize") {
+      if (e.target.dataset.option === 'syncresize') {
         if (e.target.checked) {
           _grid.setOptions({ syncColumnCellResize: true });
         } else {
@@ -213,18 +270,18 @@
         return;
       }
 
-      if ($(e.target).is(":checkbox")) {
-        var isChecked = e.target.checked;
-        var columnId = $(e.target).data("column-id") || "";
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
+      if (e.target.type === 'checkbox') {
+        const isChecked = e.target.checked;
+        const columnId = e.target.dataset.columnid || '';
+        let visibleColumns = [];
+        columnCheckboxes.forEach((columnCheckbox, idx) => {
+          if (columnCheckbox.checked) {
+            visibleColumns.push(columns[idx]);
           }
         });
 
         if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
+          e.target.checked = true;
           return;
         }
 
@@ -255,5 +312,5 @@
   }
 
   // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
-})(jQuery);
+  Slick.Utils.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
+})(window);