kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.22

package/dist/js/materialize.mjs

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -1430,13 +1430,24 @@ const _defaults$u = {
 class Kanban extends Component {
     _draggedCard = null;
     _dragSourceColumn = null;
+    _dropPreview = null;
+    _dragImage = null;
+    _previewHeight = 64;
     _onDragStart = (event) => {
         const card = event.target?.closest('.kanban-card');
-        if (!card || !this.options.draggable)
+        if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true')
             return;
         this._draggedCard = card;
         this._dragSourceColumn = card.closest('.kanban-column');
+        this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
         card.classList.add('is-dragging');
+        this._dragImage = card.cloneNode(true);
+        this._dragImage.classList.remove('is-dragging');
+        this._dragImage.classList.add('kanban-drag-image');
+        this._dragImage.setAttribute('aria-hidden', 'true');
+        this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+        document.body.appendChild(this._dragImage);
+        event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
         event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
         if (event.dataTransfer)
             event.dataTransfer.effectAllowed = 'move';
@@ -1452,6 +1463,7 @@ class Kanban extends Component {
             event.dataTransfer.dropEffect = 'move';
         this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
         column.classList.add('is-drag-over');
+        this._updateDropPreview(column, event);
     };
     _onDrop = (event) => {
         if (!this._draggedCard)
@@ -1463,17 +1475,21 @@ class Kanban extends Component {
         const body = column.querySelector('.kanban-column-body') || column;
         const targetCard = event.target?.closest('.kanban-card');
         const source = this._dragSourceColumn;
-        if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
-            const box = targetCard.getBoundingClientRect();
-            body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+        const movedCard = this._draggedCard;
+        if (this._dropPreview?.parentElement === body) {
+            body.insertBefore(movedCard, this._dropPreview);
+            this._dropPreview.remove();
+        }
+        else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+            body.insertBefore(movedCard, targetCard);
         }
         else {
-            body.appendChild(this._draggedCard);
+            body.appendChild(movedCard);
         }
         this._clearDragState();
         this._updateCounts();
         if (source && source !== column)
-            this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+            this.options.onMove?.({ card: movedCard, from: source, to: column });
     };
     _onDragEnd = () => this._clearDragState();
     constructor(el, options) {
@@ -1502,9 +1518,15 @@ class Kanban extends Component {
                 body.setAttribute('role', 'list');
             column.querySelectorAll('.kanban-card').forEach((card) => {
                 card.setAttribute('role', 'listitem');
-                card.setAttribute('tabindex', '0');
-                if (this.options.draggable)
+                const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+                card.setAttribute('tabindex', disabled ? '-1' : '0');
+                if (disabled) {
+                    card.setAttribute('aria-disabled', 'true');
+                    card.draggable = false;
+                }
+                else if (this.options.draggable) {
                     card.draggable = true;
+                }
             });
         });
         this._updateCounts();
@@ -1516,10 +1538,15 @@ class Kanban extends Component {
         this.el.addEventListener('dragend', this._onDragEnd);
     }
     _clearDragState() {
+        this._dragImage?.remove();
+        this._dragImage = null;
+        this._dropPreview?.remove();
+        this._dropPreview = null;
         this._draggedCard?.classList.remove('is-dragging');
         this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
         this._draggedCard = null;
         this._dragSourceColumn = null;
+        this._previewHeight = 64;
     }
     _updateCounts() {
         this.el.querySelectorAll('.kanban-column').forEach((column) => {
@@ -1527,8 +1554,33 @@ class Kanban extends Component {
             const body = column.querySelector('.kanban-column-body');
             if (count && body)
                 count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+            const empty = body?.querySelector('.kanban-empty');
+            if (empty && body)
+                empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
         });
     }
+    _updateDropPreview(column, event) {
+        const body = column.querySelector('.kanban-column-body') || column;
+        const targetCard = event.target?.closest('.kanban-card');
+        if (targetCard === this._draggedCard)
+            return;
+        if (!this._dropPreview) {
+            this._dropPreview = document.createElement('div');
+            this._dropPreview.className = 'kanban-drop-preview';
+            this._dropPreview.setAttribute('aria-hidden', 'true');
+        }
+        // Keep the preview tied to the dragged card's original height. Using the
+        // hovered card's height makes the placeholder jump as the pointer crosses
+        // cards with different content lengths.
+        this._dropPreview.style.height = `${this._previewHeight}px`;
+        if (targetCard && targetCard.parentElement === body) {
+            const box = targetCard.getBoundingClientRect();
+            body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+        }
+        else if (this._dropPreview.parentElement !== body) {
+            body.appendChild(this._dropPreview);
+        }
+    }
     destroy() {
         this._clearDragState();
         this.el.removeEventListener('dragstart', this._onDragStart);
@@ -9378,7 +9430,7 @@ class Waves {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const version = '2.3.3-1.0.21';
+const version = '2.3.3-1.0.22';
 /**
  * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
  * class in v2 with no bare functional equivalent of its own.

package/package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materialize.kevinzarshenas.com",
-  "version": "2.3.3-1.0.21",
+  "version": "2.3.3-1.0.22",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",