svelte-dnd-action 0.9.14 → 0.9.17

package/README.md

@@ -206,7 +206,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
 -   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
--   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples below.
+-   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name
 

package/dist/index.js

@@ -1054,6 +1054,54 @@
     resetScrolling$1();
   }
 
+  /**
+   * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+   * Since svelte manages select value internally.
+   * @see https://github.com/sveltejs/svelte/issues/6717
+   * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+   * 
+   * @param {HTMLElement} el 
+   * @returns 
+   */
+  function svelteNodeClone(el) {
+    var cloned = el.cloneNode(true);
+    var values = [];
+    var elIsSelect = el.tagName === "SELECT";
+    var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+    var _iterator = _createForOfIteratorHelper(selects),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _select = _step.value;
+        values.push(_select.value);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    if (selects.length <= 0) {
+      return cloned;
+    }
+
+    var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+    for (var i = 0; i < clonedSelects.length; i++) {
+      var select = clonedSelects[i];
+      var value = values[i];
+      var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+      if (optionEl) {
+        optionEl.setAttribute('selected', true);
+      }
+    }
+
+    return cloned;
+  }
+
   var TRANSITION_DURATION_SECONDS = 0.2;
   /**
    * private helper function - creates a transition string for a property
@@ -1074,7 +1122,7 @@
 
   function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     var rect = originalElement.getBoundingClientRect();
-    var draggedEl = originalElement.cloneNode(true);
+    var draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";
@@ -1649,6 +1697,7 @@
   }
 
   function dndzone(node, options) {
+    var initialized = false;
     var config = {
       items: undefined,
       type: undefined,
@@ -1852,7 +1901,7 @@
       config.transformDraggedElement = transformDraggedElement;
       config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-      if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+      if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
         styleInactiveDropZones([node], function () {
           return config.dropTargetStyle;
         }, function () {
@@ -1872,7 +1921,7 @@
         return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
       }
 
-      if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+      if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
         if (dropFromOthersDisabled) {
           styleInactiveDropZones([node], function (dz) {
             return getConfigProp(dz, "dropTargetStyle");
@@ -1918,6 +1967,10 @@
 
 
         elToIdx.set(draggableEl, idx);
+
+        if (!initialized) {
+          initialized = true;
+        }
       };
 
       for (var idx = 0; idx < node.children.length; idx++) {
@@ -1955,7 +2008,12 @@
   var alertsDiv;
 
   function initAriaOnBrowser() {
-    // setting the dynamic alerts
+    if (alertsDiv) {
+      // it is already initialized
+      return;
+    } // setting the dynamic alerts
+
+
     alertsDiv = document.createElement("div");
 
     (function initAlertsDiv() {
@@ -1999,6 +2057,20 @@
 
     return _objectSpread2({}, INSTRUCTION_IDs);
   }
+  /**
+   * Removes all the artifacts (dom elements) added by this module
+   */
+
+  function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+      var _document$getElementB;
+
+      return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+    });
+    alertsDiv.remove();
+    alertsDiv = undefined;
+  }
 
   function instructionToHiddenDiv(id, txt) {
     var div = document.createElement("div");
@@ -2016,6 +2088,12 @@
 
 
   function alertToScreenReader(txt) {
+    if (isOnServer) return;
+
+    if (!alertsDiv) {
+      initAriaOnBrowser();
+    }
+
     alertsDiv.innerHTML = "";
     var alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2046,7 +2124,7 @@
    * maybe keep focus on the last dragged item upon drop?
    */
 
-  var INSTRUCTION_IDs$1 = initAria();
+  var INSTRUCTION_IDs$1;
   /* drop-zones registration management */
 
   function registerDropZone$1(dropZoneEl, type) {
@@ -2058,6 +2136,7 @@
       printDebug(function () {
         return "adding global keydown and click handlers";
       });
+      INSTRUCTION_IDs$1 = initAria();
       window.addEventListener("keydown", globalKeyDownHandler);
       window.addEventListener("click", globalClickHandler);
     }
@@ -2094,6 +2173,8 @@
       });
       window.removeEventListener("keydown", globalKeyDownHandler);
       window.removeEventListener("click", globalClickHandler);
+      INSTRUCTION_IDs$1 = undefined;
+      destroyAria();
     }
   }
 
@@ -2411,18 +2492,19 @@
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
 
-      if (!autoAriaDisabled) {
-        node.setAttribute("aria-disabled", dragDisabled);
-        node.setAttribute("role", "list");
-        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-      }
-
       if (config.type && newType !== config.type) {
         unregisterDropZone$1(node, config.type);
       }
 
       config.type = newType;
       registerDropZone$1(node, newType);
+
+      if (!autoAriaDisabled) {
+        node.setAttribute("aria-disabled", dragDisabled);
+        node.setAttribute("role", "list");
+        node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+      }
+
       dzToConfig$1.set(node, config);
 
       if (isDragging) {

package/dist/index.mjs

@@ -1048,6 +1048,54 @@ function disarmWindowScroller() {
   resetScrolling$1();
 }
 
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+function svelteNodeClone(el) {
+  var cloned = el.cloneNode(true);
+  var values = [];
+  var elIsSelect = el.tagName === "SELECT";
+  var selects = elIsSelect ? [el] : _toConsumableArray(el.querySelectorAll('select'));
+
+  var _iterator = _createForOfIteratorHelper(selects),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _select = _step.value;
+      values.push(_select.value);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  var clonedSelects = elIsSelect ? [cloned] : _toConsumableArray(cloned.querySelectorAll('select'));
+
+  for (var i = 0; i < clonedSelects.length; i++) {
+    var select = clonedSelects[i];
+    var value = values[i];
+    var optionEl = select.querySelector("option[value=\"".concat(value, "\""));
+
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}
+
 var TRANSITION_DURATION_SECONDS = 0.2;
 /**
  * private helper function - creates a transition string for a property
@@ -1068,7 +1116,7 @@ function trs(property) {
 
 function createDraggedElementFrom(originalElement, positionCenterOnXY) {
   var rect = originalElement.getBoundingClientRect();
-  var draggedEl = originalElement.cloneNode(true);
+  var draggedEl = svelteNodeClone(originalElement);
   copyStylesFromTo(originalElement, draggedEl);
   draggedEl.id = DRAGGED_ELEMENT_ID;
   draggedEl.style.position = "fixed";
@@ -1643,6 +1691,7 @@ function cleanupPostDrop() {
 }
 
 function dndzone(node, options) {
+  var initialized = false;
   var config = {
     items: undefined,
     type: undefined,
@@ -1846,7 +1895,7 @@ function dndzone(node, options) {
     config.transformDraggedElement = transformDraggedElement;
     config.centreDraggedOnCursor = centreDraggedOnCursor; // realtime update for dropTargetStyle
 
-    if (isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
+    if (initialized && isWorkingOnPreviousDrag && !finalizingPreviousDrag && (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) || !areArraysShallowEqualSameOrder(dropTargetClasses, config.dropTargetClasses))) {
       styleInactiveDropZones([node], function () {
         return config.dropTargetStyle;
       }, function () {
@@ -1866,7 +1915,7 @@ function dndzone(node, options) {
       return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
     }
 
-    if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+    if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
       if (dropFromOthersDisabled) {
         styleInactiveDropZones([node], function (dz) {
           return getConfigProp(dz, "dropTargetStyle");
@@ -1912,6 +1961,10 @@ function dndzone(node, options) {
 
 
       elToIdx.set(draggableEl, idx);
+
+      if (!initialized) {
+        initialized = true;
+      }
     };
 
     for (var idx = 0; idx < node.children.length; idx++) {
@@ -1949,7 +2002,12 @@ var ALERT_DIV_ID = "dnd-action-aria-alert";
 var alertsDiv;
 
 function initAriaOnBrowser() {
-  // setting the dynamic alerts
+  if (alertsDiv) {
+    // it is already initialized
+    return;
+  } // setting the dynamic alerts
+
+
   alertsDiv = document.createElement("div");
 
   (function initAlertsDiv() {
@@ -1993,6 +2051,20 @@ function initAria() {
 
   return _objectSpread2({}, INSTRUCTION_IDs);
 }
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+
+function destroyAria() {
+  if (isOnServer || !alertsDiv) return;
+  Object.keys(ID_TO_INSTRUCTION).forEach(function (id) {
+    var _document$getElementB;
+
+    return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+  });
+  alertsDiv.remove();
+  alertsDiv = undefined;
+}
 
 function instructionToHiddenDiv(id, txt) {
   var div = document.createElement("div");
@@ -2010,6 +2082,12 @@ function instructionToHiddenDiv(id, txt) {
 
 
 function alertToScreenReader(txt) {
+  if (isOnServer) return;
+
+  if (!alertsDiv) {
+    initAriaOnBrowser();
+  }
+
   alertsDiv.innerHTML = "";
   var alertText = document.createTextNode(txt);
   alertsDiv.appendChild(alertText); // this is needed for Safari
@@ -2040,7 +2118,7 @@ var typeToDropZones$1 = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-var INSTRUCTION_IDs$1 = initAria();
+var INSTRUCTION_IDs$1;
 /* drop-zones registration management */
 
 function registerDropZone$1(dropZoneEl, type) {
@@ -2052,6 +2130,7 @@ function registerDropZone$1(dropZoneEl, type) {
     printDebug(function () {
       return "adding global keydown and click handlers";
     });
+    INSTRUCTION_IDs$1 = initAria();
     window.addEventListener("keydown", globalKeyDownHandler);
     window.addEventListener("click", globalClickHandler);
   }
@@ -2088,6 +2167,8 @@ function unregisterDropZone$1(dropZoneEl, type) {
     });
     window.removeEventListener("keydown", globalKeyDownHandler);
     window.removeEventListener("click", globalClickHandler);
+    INSTRUCTION_IDs$1 = undefined;
+    destroyAria();
   }
 }
 
@@ -2405,18 +2486,19 @@ function dndzone$1(node, options) {
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
 
-    if (!autoAriaDisabled) {
-      node.setAttribute("aria-disabled", dragDisabled);
-      node.setAttribute("role", "list");
-      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
-    }
-
     if (config.type && newType !== config.type) {
       unregisterDropZone$1(node, config.type);
     }
 
     config.type = newType;
     registerDropZone$1(node, newType);
+
+    if (!autoAriaDisabled) {
+      node.setAttribute("aria-disabled", dragDisabled);
+      node.setAttribute("role", "list");
+      node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs$1.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs$1.DND_ZONE_ACTIVE);
+    }
+
     dzToConfig$1.set(node, config);
 
     if (isDragging) {

package/package.json

@@ -40,7 +40,7 @@
         "dist"
     ],
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.14",
+    "version": "0.9.17",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/aria.js

@@ -13,6 +13,10 @@ const ALERT_DIV_ID = "dnd-action-aria-alert";
 let alertsDiv;
 
 function initAriaOnBrowser() {
+    if (alertsDiv) {
+        // it is already initialized
+        return;
+    }
     // setting the dynamic alerts
     alertsDiv = document.createElement("div");
     (function initAlertsDiv() {
@@ -47,6 +51,17 @@ export function initAria() {
     }
     return {...INSTRUCTION_IDs};
 }
+
+/**
+ * Removes all the artifacts (dom elements) added by this module
+ */
+export function destroyAria() {
+    if (isOnServer || !alertsDiv) return;
+    Object.keys(ID_TO_INSTRUCTION).forEach(id => document.getElementById(id)?.remove());
+    alertsDiv.remove();
+    alertsDiv = undefined;
+}
+
 function instructionToHiddenDiv(id, txt) {
     const div = document.createElement("div");
     div.id = id;
@@ -62,6 +77,10 @@ function instructionToHiddenDiv(id, txt) {
  * @param {string} txt
  */
 export function alertToScreenReader(txt) {
+    if (isOnServer) return;
+    if (!alertsDiv) {
+        initAriaOnBrowser();
+    }
     alertsDiv.innerHTML = "";
     const alertText = document.createTextNode(txt);
     alertsDiv.appendChild(alertText);

package/src/helpers/styler.js

@@ -1,5 +1,6 @@
 import {SHADOW_ELEMENT_ATTRIBUTE_NAME, DRAGGED_ELEMENT_ID} from "../constants";
 import {findCenter} from "./intersection";
+import { svelteNodeClone } from "./svelteNodeClone";
 
 const TRANSITION_DURATION_SECONDS = 0.2;
 
@@ -19,7 +20,7 @@ function trs(property) {
  */
 export function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     const rect = originalElement.getBoundingClientRect();
-    const draggedEl = originalElement.cloneNode(true);
+    const draggedEl = svelteNodeClone(originalElement);
     copyStylesFromTo(originalElement, draggedEl);
     draggedEl.id = DRAGGED_ELEMENT_ID;
     draggedEl.style.position = "fixed";

package/src/helpers/svelteNodeClone.js

@@ -0,0 +1,35 @@
+/**
+ * Fixes svelte issue when cloning node containing (or being) <select> which will loose it's value.
+ * Since svelte manages select value internally.
+ * @see https://github.com/sveltejs/svelte/issues/6717
+ * @see https://github.com/isaacHagoel/svelte-dnd-action/issues/306
+ * 
+ * @param {HTMLElement} el 
+ * @returns 
+ */
+export function svelteNodeClone(el) {
+  const cloned = el.cloneNode(true);
+
+  const values = [];
+  const elIsSelect = el.tagName === "SELECT";
+  const selects = elIsSelect ? [el] : [...el.querySelectorAll('select')];
+  for (const select of selects) {
+    values.push(select.value);
+  }
+
+  if (selects.length <= 0) {
+    return cloned;
+  }
+
+  const clonedSelects = elIsSelect ? [cloned] : [...cloned.querySelectorAll('select')];
+  for (let i = 0; i < clonedSelects.length; i++) {
+    const select = clonedSelects[i];
+    const value = values[i];
+    const optionEl = select.querySelector(`option[value="${value}"`);
+    if (optionEl) {
+      optionEl.setAttribute('selected', true);
+    }
+  }
+
+  return cloned;
+}

package/src/keyboardAction.js

@@ -1,7 +1,7 @@
 import {decrementActiveDropZoneCount, incrementActiveDropZoneCount, ITEM_ID_KEY, SOURCES, TRIGGERS} from "./constants";
 import {styleActiveDropZones, styleInactiveDropZones} from "./helpers/styler";
 import {dispatchConsiderEvent, dispatchFinalizeEvent} from "./helpers/dispatcher";
-import {initAria, alertToScreenReader} from "./helpers/aria";
+import {initAria, alertToScreenReader, destroyAria} from "./helpers/aria";
 import {toString} from "./helpers/util";
 import {printDebug} from "./constants";
 
@@ -29,13 +29,14 @@ const typeToDropZones = new Map();
  * maybe keep focus on the last dragged item upon drop?
  */
 
-const INSTRUCTION_IDs = initAria();
+let INSTRUCTION_IDs;
 
 /* drop-zones registration management */
 function registerDropZone(dropZoneEl, type) {
     printDebug(() => "registering drop-zone if absent");
     if (typeToDropZones.size === 0) {
         printDebug(() => "adding global keydown and click handlers");
+        INSTRUCTION_IDs = initAria();
         window.addEventListener("keydown", globalKeyDownHandler);
         window.addEventListener("click", globalClickHandler);
     }
@@ -61,6 +62,8 @@ function unregisterDropZone(dropZoneEl, type) {
         printDebug(() => "removing global keydown and click handlers");
         window.removeEventListener("keydown", globalKeyDownHandler);
         window.removeEventListener("click", globalClickHandler);
+        INSTRUCTION_IDs = undefined;
+        destroyAria();
     }
 }
 
@@ -280,16 +283,16 @@ export function dndzone(node, options) {
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
-        if (!autoAriaDisabled) {
-            node.setAttribute("aria-disabled", dragDisabled);
-            node.setAttribute("role", "list");
-            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
-        }
         if (config.type && newType !== config.type) {
             unregisterDropZone(node, config.type);
         }
         config.type = newType;
         registerDropZone(node, newType);
+        if (!autoAriaDisabled) {
+            node.setAttribute("aria-disabled", dragDisabled);
+            node.setAttribute("role", "list");
+            node.setAttribute("aria-describedby", dragDisabled ? INSTRUCTION_IDs.DND_ZONE_DRAG_DISABLED : INSTRUCTION_IDs.DND_ZONE_ACTIVE);
+        }
         dzToConfig.set(node, config);
 
         if (isDragging) {
@@ -298,8 +301,8 @@ export function dndzone(node, options) {
                 focusedItem.contains(node) ||
                 config.dropFromOthersDisabled ||
                 (focusedDz && config.type !== dzToConfig.get(focusedDz).type)
-                ? -1
-                : 0;
+                    ? -1
+                    : 0;
         } else {
             node.tabIndex = config.zoneTabIndex;
         }

package/src/pointerAction.js

@@ -301,6 +301,7 @@ function cleanupPostDrop() {
 }
 
 export function dndzone(node, options) {
+    let initialized = false;
     const config = {
         items: undefined,
         type: undefined,
@@ -442,7 +443,6 @@ export function dndzone(node, options) {
         }
         config.type = newType;
         registerDropZone(node, newType);
-
         config.items = [...items];
         config.dragDisabled = dragDisabled;
         config.morphDisabled = morphDisabled;
@@ -451,6 +451,7 @@ export function dndzone(node, options) {
 
         // realtime update for dropTargetStyle
         if (
+            initialized &&
             isWorkingOnPreviousDrag &&
             !finalizingPreviousDrag &&
             (!areObjectsShallowEqual(dropTargetStyle, config.dropTargetStyle) ||
@@ -474,7 +475,7 @@ export function dndzone(node, options) {
         function getConfigProp(dz, propName) {
             return dzToConfig.get(dz) ? dzToConfig.get(dz)[propName] : config[propName];
         }
-        if (isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
+        if (initialized && isWorkingOnPreviousDrag && config.dropFromOthersDisabled !== dropFromOthersDisabled) {
             if (dropFromOthersDisabled) {
                 styleInactiveDropZones(
                     [node],
@@ -514,6 +515,10 @@ export function dndzone(node, options) {
             }
             // updating the idx
             elToIdx.set(draggableEl, idx);
+
+            if (!initialized) {
+                initialized = true;
+            }
         }
     }
     configure(options);