Release v2.2.1

.github/workflows/nightly.yml

@@ -12,6 +12,10 @@ jobs:
     steps:
     - uses: actions/checkout@master
 
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 23
+
     - name: Run tests
       run: |
         npm i

eslint.config.mjs

@@ -16,7 +16,7 @@ export default [
       '@typescript-eslint/no-unused-vars': 'error',
       '@typescript-eslint/no-unused-expressions': 'error',
       '@typescript-eslint/no-this-alias': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'error',
+      '@typescript-eslint/no-empty-object-type': ['error' , { allowWithName: 'BaseOptions$' }],
       '@typescript-eslint/no-require-imports': 'error',
       '@typescript-eslint/no-unsafe-function-type': 'error'
     }

package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materializeweb.com",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",
@@ -37,7 +37,7 @@
     "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
     "release": "npm run lint && npm run build && node ci/compress.js",
     "preversion": "npm run lint && npm test",
-    "version": "npm run build && node ci/compress.js && git add -A dist src/index.ts"
+    "version": "npm run build && node ci/compress.js && git add ."
   },
   "lint-staged": {
     "js/*.js": [
@@ -71,7 +71,8 @@
     "typescript-eslint": "^8.6.0"
   },
   "files": [
-    "dist",
+    "dist/css",
+    "dist/js",
     "sass/**/*.scss",
     "LICENSE"
   ]

spec/helpers/helper.js

@@ -1,6 +1,3 @@
-/* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
-
 const KEYMAP = {
   '27': 'Escape',
   '32': 'Space',
@@ -121,28 +118,27 @@ const KEYMAP = {
   '105': '9'
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function XloadHtml(html, options) {
   options = options ? options : {};
   const defaultOptions = { insertionType: 'append' };
   options = {
     ...defaultOptions,
     ...options
   };
-
   const div = document.createElement('div');
   div.classList.add('please-delete-me');
   div.innerHTML = html;
-
   if (options.insertionType === 'append') {
     document.body.appendChild(div);
   } else if (options.insertionType === 'prepend') {
     document.body.prepend(div);
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function XunloadFixtures() {
   document.querySelectorAll('.please-delete-me').forEach((el) => el.remove());
-  //
   document.querySelectorAll('.material-tooltip').forEach((el) => el.remove());
   document.querySelectorAll('.dropdown-content').forEach((el) => el.remove());
 }
@@ -152,7 +148,7 @@ beforeEach(() => {
     toExist: (util, customEqualityTesters) => {
       return {
         compare: (actual) => {
-          let result = {};
+          const result = {};
           result.pass = util.equals(!!actual, true, customEqualityTesters);
           return result;
         }
@@ -190,7 +186,7 @@ beforeEach(() => {
       return {
         compare: (actual) => {
           const style = getComputedStyle(actual);
-          let result = {};
+          const result = {};
           result.pass = util.equals(
             style.getPropertyValue('display'),
             'none',
@@ -204,7 +200,7 @@ beforeEach(() => {
       return {
         compare: (actual) => {
           const style = getComputedStyle(actual);
-          let result = {};
+          const result = {};
           result.pass = !util.equals(
             style.getPropertyValue('display'),
             'none',
@@ -224,7 +220,7 @@ beforeEach(() => {
     toHaveClass: (util, customEqualityTesters) => {
       return {
         compare: (actual, expected) => {
-          let result = {};
+          const result = {};
           result.pass = util.equals(
             actual.classList.contains(expected),
             true,
@@ -237,7 +233,7 @@ beforeEach(() => {
     toNotHaveClass: (util, customEqualityTesters) => {
       return {
         compare: function (actual, expected) {
-          let result = {};
+          const result = {};
           result.pass = util.equals(
             actual.classList.contains(expected),
             false,

spec/tests/autocomplete/autocompleteSpec.js

@@ -96,7 +96,7 @@ describe('Autocomplete Plugin', () => {
       }
       const limitedInstance = M.Autocomplete.getInstance(limited);
       const limit = 20;
-      limitedInstance.options.onSearch = (text) => {
+      limitedInstance.options.onSearch = () => {
         const filteredItems = data.slice(0, limit);
         limitedInstance.setMenuItems(filteredItems);
       };
@@ -114,8 +114,8 @@ describe('Autocomplete Plugin', () => {
     });
 
     it('should open correctly from typing', (done) => {
-      let normal = document.querySelector('#normal-autocomplete');
-      let autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
       focus(normal);
       normal.value = 'e';
       keyup(normal, 69);
@@ -129,8 +129,8 @@ describe('Autocomplete Plugin', () => {
     });
 
     it('should open correctly from keyboard focus', (done) => {
-      let normal = document.querySelector('#normal-autocomplete');
-      let autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
       normal.value = 'e';
       keyup(normal, 9);
       focus(normal);

spec/tests/cards/cardsSpec.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 describe('Cards', () => {
   const fixture = `<div class="row">
   <div class="col s12 m6">
@@ -91,13 +89,13 @@ describe('Cards', () => {
 
     beforeEach(() => {
       revealCard = document.querySelector('.card.reveal');
+      M.Cards.init(document.querySelectorAll('.card'));
     });
 
     it('should have a hidden card-reveal', (done) => {
       const revealDiv = revealCard.querySelector('.card-reveal');
       const activator = revealCard.querySelector('.activator');
       expect(revealDiv).toBeHidden('reveal div should be hidden initially');
-
       click(activator);
       setTimeout(() => {
         expect(revealDiv).toBeVisible('reveal did not appear after activator was clicked.');
@@ -150,13 +148,13 @@ describe('Cards', () => {
     });
 
     it('should have small card dimensions', () => {
-      let cardImage = small.querySelector('.card-image');
-      let cardContent = small.querySelector('.card-content');
-      let cardAction = small.querySelector('.card-action');
-      let smallRect = small.getBoundingClientRect();
-      let cardImageRect = cardImage.getBoundingClientRect();
-      let cardContentRect = cardContent.getBoundingClientRect();
-      let cardActionRect = cardAction.getBoundingClientRect();
+      const cardImage = small.querySelector('.card-image');
+      const cardContent = small.querySelector('.card-content');
+      const cardAction = small.querySelector('.card-action');
+      const smallRect = small.getBoundingClientRect();
+      const cardImageRect = cardImage.getBoundingClientRect();
+      const cardContentRect = cardContent.getBoundingClientRect();
+      const cardActionRect = cardAction.getBoundingClientRect();
 
       expect(smallRect.height).toEqual(300, 'small card should be 300px high');
       expect(cardImageRect.height).toBeLessThan(181, 'small image should be <= 180px or 60% high');
@@ -171,13 +169,13 @@ describe('Cards', () => {
     });
 
     it('should have medium card dimensions', () => {
-      let cardImage = medium.querySelector('.card-image');
-      let cardContent = medium.querySelector('.card-content');
-      let cardAction = medium.querySelector('.card-action');
-      let mediumRect = medium.getBoundingClientRect();
-      let cardImageRect = cardImage.getBoundingClientRect();
-      let cardContentRect = cardContent.getBoundingClientRect();
-      let cardActionRect = cardAction.getBoundingClientRect();
+      const cardImage = medium.querySelector('.card-image');
+      const cardContent = medium.querySelector('.card-content');
+      const cardAction = medium.querySelector('.card-action');
+      const mediumRect = medium.getBoundingClientRect();
+      const cardImageRect = cardImage.getBoundingClientRect();
+      const cardContentRect = cardContent.getBoundingClientRect();
+      const cardActionRect = cardAction.getBoundingClientRect();
 
       expect(mediumRect.height).toEqual(400, 'medium card should be 400px high');
       expect(cardImageRect.height).toBeLessThan(241, 'medium image should be <= 240 or 60% high');
@@ -192,13 +190,13 @@ describe('Cards', () => {
     });
 
     it('should have large card dimensions', () => {
-      let cardImage = large.querySelector('.card-image');
-      let cardContent = large.querySelector('.card-content');
-      let cardAction = large.querySelector('.card-action');
-      let largeRect = large.getBoundingClientRect();
-      let cardImageRect = cardImage.getBoundingClientRect();
-      let cardContentRect = cardContent.getBoundingClientRect();
-      let cardActionRect = cardAction.getBoundingClientRect();
+      const cardImage = large.querySelector('.card-image');
+      const cardContent = large.querySelector('.card-content');
+      const cardAction = large.querySelector('.card-action');
+      const largeRect = large.getBoundingClientRect();
+      const cardImageRect = cardImage.getBoundingClientRect();
+      const cardContentRect = cardContent.getBoundingClientRect();
+      const cardActionRect = cardAction.getBoundingClientRect();
 
       expect(largeRect.height).toEqual(500, 'large card should be 500px high');
       expect(cardImageRect.height).toBeLessThan(301, 'large image should be <= 300 or 60% high');

spec/tests/carousel/carouselSpec.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 describe('Carousel', () => {
   const fixture = `<div class="carousel carousel-slider" id="slider-no-wrap">
   <div class="carousel-item">
@@ -52,10 +50,12 @@ describe('Carousel', () => {
 
       document.querySelectorAll('.indicator-item')[1].click();
       setTimeout(() => {
-        expect(carousel.center).toEqual(1, 'carousel item was not visible after indicator interaction');
+        expect(carousel.center).toEqual(
+          1,
+          'carousel item was not visible after indicator interaction'
+        );
         done();
       }, 30);
     });
-
   });
 });

spec/tests/chips/chipsSpec.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 describe('Chips', () => {
   const fixture = `<div class="chips"></div>
 <div class="chips chips-initial"></div>
@@ -66,7 +64,7 @@ describe('Chips', () => {
       M.Chips.init(chips);
       M.Chips.init(chips);
       chipsUserInput = document.querySelector('.chips.input-field');
-      M.Chips.init(chips, {allowUserInput: true});
+      M.Chips.init(chips, { allowUserInput: true });
       input = chipsUserInput.querySelectorAll('input');
       expect(input.length).toEqual(1, 'Should dynamically generate chips structure.');
     });
@@ -77,8 +75,8 @@ describe('Chips', () => {
       input.value = 'one';
       keydown(input, 13);
       setTimeout(() => {
-        let numChips = chips.querySelectorAll('.chip').length;
-        let oneChip = chips.querySelector('.chip');
+        const numChips = chips.querySelectorAll('.chip').length;
+        const oneChip = chips.querySelector('.chip');
         expect(numChips).toEqual(1, 'one chip should have been added');
         for (let i = oneChip.children.length - 1; i >= 0; i--) {
           oneChip.children[i].remove();
@@ -92,7 +90,7 @@ describe('Chips', () => {
       chips = document.querySelector('.chips.chips-initial.input-field');
       let numChips = chips.querySelectorAll('.chip').length;
       expect(numChips).toEqual(3, '3 initial chips should have been added');
-      let chipCloseButton = chips.querySelectorAll('.chip .close');
+      const chipCloseButton = chips.querySelectorAll('.chip .close');
       expect(chipCloseButton.length).toEqual(3, 'expected all chips to have close button');
       click(chipCloseButton[0]);
       setTimeout(() => {