svelte-dnd-action 0.9.74 → 0.9.75

package/dist/index.js

@@ -2387,6 +2387,25 @@
       handleDrop();
     }
   }
+  function getActiveDragTabIndex(dropZoneEl, config) {
+    return dropZoneEl === focusedDz || focusedItem.contains(dropZoneEl) || config.dropFromOthersDisabled || config.type !== draggedItemType ? -1 : 0;
+  }
+  function refreshActiveDragTabIndices() {
+    dzToConfig.forEach(function (config, dropZoneEl) {
+      dropZoneEl.tabIndex = getActiveDragTabIndex(dropZoneEl, config);
+    });
+  }
+  function grabIsAlive() {
+    var focusedConfig = dzToConfig.get(focusedDz);
+    if (focusedConfig !== null && focusedConfig !== void 0 && focusedConfig.items.some(function (item) {
+      return item[ITEM_ID_KEY] === focusedItemId;
+    })) return true;
+    printDebug(function () {
+      return "dragged item is gone, dropping";
+    });
+    handleDrop();
+    return false;
+  }
   function handleZoneFocus(e) {
     printDebug(function () {
       return "zone focus";
@@ -2394,6 +2413,7 @@
     if (!isDragging) return;
     var newlyFocusedDz = e.currentTarget;
     if (newlyFocusedDz === focusedDz) return;
+    if (!grabIsAlive()) return;
     focusedDzLabel = newlyFocusedDz.getAttribute("aria-label") || "";
     var _dzToConfig$get = dzToConfig.get(focusedDz),
       originItems = _dzToConfig$get.items;
@@ -2660,13 +2680,22 @@
         node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
       }
       dzToConfig.set(node, config);
+      var itemMovedToThisZone = false;
       if (isDragging) {
-        node.tabIndex = node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig.get(focusedDz).type ? -1 : 0;
+        itemMovedToThisZone = config.type === draggedItemType && config.items.some(function (item) {
+          return item[ITEM_ID_KEY] === focusedItemId;
+        }) && node !== focusedDz;
+        if (itemMovedToThisZone) {
+          focusedDz = node;
+          focusedDzLabel = node.getAttribute("aria-label") || "";
+        }
+        node.tabIndex = getActiveDragTabIndex(node, config);
       } else {
         node.tabIndex = config.zoneTabIndex;
       }
       node.addEventListener("focus", handleZoneFocus);
       var _loop = function _loop(i) {
+        var _config$items$i;
         var draggableEl = node.children[i];
         allDragTargets.add(draggableEl);
         draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
@@ -2681,7 +2710,7 @@
           draggableEl.addEventListener("click", handleClick);
           elToFocusListeners.set(draggableEl, handleClick);
         }
-        if (isDragging && config.items[i][ITEM_ID_KEY] === focusedItemId) {
+        if (isDragging && config.type === draggedItemType && ((_config$items$i = config.items[i]) === null || _config$items$i === void 0 ? void 0 : _config$items$i[ITEM_ID_KEY]) === focusedItemId) {
           printDebug(function () {
             return ["focusing on", {
               i: i,
@@ -2698,6 +2727,11 @@
       for (var i = 0; i < node.children.length; i++) {
         _loop(i);
       }
+      if (itemMovedToThisZone) {
+        // Nested actions are configured before their parent action. Refresh only
+        // after focusedItem points at the replacement so nested zones stay untabbable.
+        refreshActiveDragTabIndices();
+      }
     }
     configure(options);
     var handles = {

package/dist/index.mjs

@@ -2381,6 +2381,25 @@ function globalClickHandler() {
     handleDrop();
   }
 }
+function getActiveDragTabIndex(dropZoneEl, config) {
+  return dropZoneEl === focusedDz || focusedItem.contains(dropZoneEl) || config.dropFromOthersDisabled || config.type !== draggedItemType ? -1 : 0;
+}
+function refreshActiveDragTabIndices() {
+  dzToConfig.forEach(function (config, dropZoneEl) {
+    dropZoneEl.tabIndex = getActiveDragTabIndex(dropZoneEl, config);
+  });
+}
+function grabIsAlive() {
+  var focusedConfig = dzToConfig.get(focusedDz);
+  if (focusedConfig !== null && focusedConfig !== void 0 && focusedConfig.items.some(function (item) {
+    return item[ITEM_ID_KEY] === focusedItemId;
+  })) return true;
+  printDebug(function () {
+    return "dragged item is gone, dropping";
+  });
+  handleDrop();
+  return false;
+}
 function handleZoneFocus(e) {
   printDebug(function () {
     return "zone focus";
@@ -2388,6 +2407,7 @@ function handleZoneFocus(e) {
   if (!isDragging) return;
   var newlyFocusedDz = e.currentTarget;
   if (newlyFocusedDz === focusedDz) return;
+  if (!grabIsAlive()) return;
   focusedDzLabel = newlyFocusedDz.getAttribute("aria-label") || "";
   var _dzToConfig$get = dzToConfig.get(focusedDz),
     originItems = _dzToConfig$get.items;
@@ -2654,13 +2674,22 @@ function dndzone$1(node, options) {
       node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
     }
     dzToConfig.set(node, config);
+    var itemMovedToThisZone = false;
     if (isDragging) {
-      node.tabIndex = node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig.get(focusedDz).type ? -1 : 0;
+      itemMovedToThisZone = config.type === draggedItemType && config.items.some(function (item) {
+        return item[ITEM_ID_KEY] === focusedItemId;
+      }) && node !== focusedDz;
+      if (itemMovedToThisZone) {
+        focusedDz = node;
+        focusedDzLabel = node.getAttribute("aria-label") || "";
+      }
+      node.tabIndex = getActiveDragTabIndex(node, config);
     } else {
       node.tabIndex = config.zoneTabIndex;
     }
     node.addEventListener("focus", handleZoneFocus);
     var _loop = function _loop(i) {
+      var _config$items$i;
       var draggableEl = node.children[i];
       allDragTargets.add(draggableEl);
       draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
@@ -2675,7 +2704,7 @@ function dndzone$1(node, options) {
         draggableEl.addEventListener("click", handleClick);
         elToFocusListeners.set(draggableEl, handleClick);
       }
-      if (isDragging && config.items[i][ITEM_ID_KEY] === focusedItemId) {
+      if (isDragging && config.type === draggedItemType && ((_config$items$i = config.items[i]) === null || _config$items$i === void 0 ? void 0 : _config$items$i[ITEM_ID_KEY]) === focusedItemId) {
         printDebug(function () {
           return ["focusing on", {
             i: i,
@@ -2692,6 +2721,11 @@ function dndzone$1(node, options) {
     for (var i = 0; i < node.children.length; i++) {
       _loop(i);
     }
+    if (itemMovedToThisZone) {
+      // Nested actions are configured before their parent action. Refresh only
+      // after focusedItem points at the replacement so nested zones stay untabbable.
+      refreshActiveDragTabIndices();
+    }
   }
   configure(options);
   var handles = {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.74",
+    "version": "0.9.75",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"
@@ -42,7 +42,7 @@
         "@babel/preset-env": "^7.9.6",
         "@rollup/plugin-node-resolve": "^6.0.0",
         "babel-jest": "^26.0.1",
-        "cypress": "^4.5.0",
+        "cypress": "15.18.1",
         "eslint": "^7.11.0",
         "husky": "^4.3.0",
         "lint-staged": "^10.5.1",

package/src/keyboardAction.js

@@ -86,12 +86,32 @@ function globalClickHandler() {
     }
 }
 
+function getActiveDragTabIndex(dropZoneEl, config) {
+    return dropZoneEl === focusedDz || focusedItem.contains(dropZoneEl) || config.dropFromOthersDisabled || config.type !== draggedItemType ? -1 : 0;
+}
+
+function refreshActiveDragTabIndices() {
+    dzToConfig.forEach((config, dropZoneEl) => {
+        dropZoneEl.tabIndex = getActiveDragTabIndex(dropZoneEl, config);
+    });
+}
+
+function grabIsAlive() {
+    const focusedConfig = dzToConfig.get(focusedDz);
+    if (focusedConfig?.items.some(item => item[ITEM_ID_KEY] === focusedItemId)) return true;
+    printDebug(() => "dragged item is gone, dropping");
+    handleDrop();
+    return false;
+}
+
 function handleZoneFocus(e) {
     printDebug(() => "zone focus");
     if (!isDragging) return;
     const newlyFocusedDz = e.currentTarget;
     if (newlyFocusedDz === focusedDz) return;
 
+    if (!grabIsAlive()) return;
+
     focusedDzLabel = newlyFocusedDz.getAttribute("aria-label") || "";
     const {items: originItems} = dzToConfig.get(focusedDz);
     const originItem = originItems.find(item => item[ITEM_ID_KEY] === focusedItemId);
@@ -315,14 +335,15 @@ export function dndzone(node, options) {
         }
         dzToConfig.set(node, config);
 
+        let itemMovedToThisZone = false;
         if (isDragging) {
-            node.tabIndex =
-                node === focusedDz ||
-                focusedItem.contains(node) ||
-                config.dropFromOthersDisabled ||
-                (focusedDz && config.type !== dzToConfig.get(focusedDz).type)
-                    ? -1
-                    : 0;
+            itemMovedToThisZone =
+                config.type === draggedItemType && config.items.some(item => item[ITEM_ID_KEY] === focusedItemId) && node !== focusedDz;
+            if (itemMovedToThisZone) {
+                focusedDz = node;
+                focusedDzLabel = node.getAttribute("aria-label") || "";
+            }
+            node.tabIndex = getActiveDragTabIndex(node, config);
         } else {
             node.tabIndex = config.zoneTabIndex;
         }
@@ -344,7 +365,7 @@ export function dndzone(node, options) {
                 draggableEl.addEventListener("click", handleClick);
                 elToFocusListeners.set(draggableEl, handleClick);
             }
-            if (isDragging && config.items[i][ITEM_ID_KEY] === focusedItemId) {
+            if (isDragging && config.type === draggedItemType && config.items[i]?.[ITEM_ID_KEY] === focusedItemId) {
                 printDebug(() => ["focusing on", {i, focusedItemId}]);
                 // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
                 focusedItem = draggableEl;
@@ -353,6 +374,11 @@ export function dndzone(node, options) {
                 draggableEl.focus();
             }
         }
+        if (itemMovedToThisZone) {
+            // Nested actions are configured before their parent action. Refresh only
+            // after focusedItem points at the replacement so nested zones stay untabbable.
+            refreshActiveDragTabIndices();
+        }
     }
     configure(options);