svelte-dnd-action 0.9.8 → 0.9.12

package/README.md

@@ -111,6 +111,7 @@ An options-object with the following attributes:
 | `dragDisabled` | Boolean | No | `false` | Setting it to true will make it impossible to drag elements out of the dnd-zone. You can change it at any time, and the zone will adjust on the fly |
 | `morphDisabled` | Boolean | No | `false` | By default, when dragging over a zone, the dragged element is morphed to look like it would if dropped. You can prevent it by setting this option. |
 | `dropFromOthersDisabled` | Boolean | No | `false` | Setting it to true will make it impossible to drop elements from other dnd-zones of the same type. Can be useful if you want to limit the max number of items for example. You can change it at any time, and the zone will adjust on the fly |
+| `zoneTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container when not dragging. Can be useful if you want to make the screen reader to skip the list container. You can change it at any time. |
 | `dropTargetStyle` | Object<String> | No | `{outline: 'rgba(255, 255, 102, 0.7) solid 2px'}` | An object of styles to apply to the dnd-zone when items can be dragged into it. Note: the styles override any inline styles applied to the dnd-zone. When the styles are removed, any original inline styles will be lost |
 | `dropTargetClasses`| Array<String> | No | `[]` | A list of classes to apply to the dnd-zone when items can be dragged into it. Note: make sure the classes you use are global. |
 | `transformDraggedElement` | Function | No | `() => {}` | A function that is invoked when the draggable element enters the dnd-zone or hover overs a new index in the current dnd-zone. <br />Signature:<br />function(element, data, index) {}<br />**element**: The dragged element. <br />**data**: The data of the item from the items array.<br />**index**: The index the dragged element will become in the new dnd-zone.<br /><br />This allows you to override properties on the dragged element, such as innerHTML to change how it displays. If what you are after is altering styles, do it to the children, not to the dragged element itself |
@@ -188,6 +189,7 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   [Generic List Component (Alternative to Slots)](https://svelte.dev/repl/028674733f67409c94bd52995d5906f1?version=3.31.0)
 -   [Maitaining internal scroll poisition on scrollable dragabble](https://svelte.dev/repl/eb2f5988bd2f46488810606c1fb13392?version=3.29.4)
 -   [Scrabble like board using over a 100 single slot dnd-zones](https://svelte.dev/repl/ed2e138417094281be6db1aef23d7859?version=3.37.0)
+-   [Select multiple elements to drag (multi-drag) with mouse or keyboard](https://svelte.dev/repl/c4eb917bb8df42c4b17402a7dda54856?version=3.24.1)
 
 -   [Fade in/out but without using Svelte transitions](https://svelte.dev/repl/3f1e68203ef140969a8240eba3475a8d?version=3.24.1)
 -   [Nested fade in/out without using Svelte transitions](https://svelte.dev/repl/49b09aedfe0543b4bc8f575c8dbf9a53?version=3.24.1)

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export interface Options {
     dragDisabled?: boolean;
     morphDisabled?: boolean;
     dropFromOthersDisabled?: boolean;
+    zoneTabIndex?: number; // set the tabindex of the list container when not dragging
     dropTargetClasses?: [string];
     dropTargetStyle?: Record<string, string>;
     transformDraggedElement?: TransformDraggedElementFunction;

package/dist/index.js

@@ -1743,6 +1743,10 @@
       var currentIdx = elToIdx.get(originalDragTarget);
       originIndex = currentIdx;
       originDropZone = originalDragTarget.parentElement;
+      /** @type {ShadowRoot | HTMLDocument} */
+
+      var rootNode = originDropZone.getRootNode();
+      var originDropZoneRoot = rootNode.body || rootNode;
       var items = config.items,
           type = config.type,
           centreDraggedOnCursor = config.centreDraggedOnCursor;
@@ -1757,12 +1761,12 @@
 
       function keepOriginalElementInDom() {
         if (!draggedEl.parentElement) {
-          document.body.appendChild(draggedEl); // to prevent the outline from disappearing
+          originDropZoneRoot.appendChild(draggedEl); // to prevent the outline from disappearing
 
           draggedEl.focus();
           watchDraggedElement();
           hideOriginalDragTarget(originalDragTarget);
-          document.body.appendChild(originalDragTarget);
+          originDropZoneRoot.appendChild(originalDragTarget);
         } else {
           window.requestAnimationFrame(keepOriginalElementInDom);
         }
@@ -2203,6 +2207,7 @@
       items: undefined,
       type: undefined,
       dragDisabled: false,
+      zoneTabIndex: 0,
       dropFromOthersDisabled: false,
       dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
       dropTargetClasses: [],
@@ -2375,6 +2380,8 @@
           newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
           _ref2$dragDisabled = _ref2.dragDisabled,
           dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+          _ref2$zoneTabIndex = _ref2.zoneTabIndex,
+          zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
           _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
           dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
           _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2386,6 +2393,7 @@
       config.items = _toConsumableArray(items);
       config.dragDisabled = dragDisabled;
       config.dropFromOthersDisabled = dropFromOthersDisabled;
+      config.zoneTabIndex = zoneTabIndex;
       config.dropTargetStyle = dropTargetStyle;
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
@@ -2403,7 +2411,13 @@
       config.type = newType;
       registerDropZone$1(node, newType);
       dzToConfig$1.set(node, config);
-      node.tabIndex = isDragging && (node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig$1.get(focusedDz).type) ? -1 : 0;
+
+      if (isDragging) {
+        node.tabIndex = node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig$1.get(focusedDz).type ? -1 : 0;
+      } else {
+        node.tabIndex = config.zoneTabIndex;
+      }
+
       node.addEventListener("focus", handleZoneFocus);
 
       var _loop = function _loop(i) {
@@ -2479,6 +2493,7 @@
    * @property {boolean} [dragDisabled]
    * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
    * @property {boolean} [dropFromOthersDisabled]
+   * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
    * @property {object} [dropTargetStyle]
    * @property {string[]} [dropTargetClasses]
    * @property {function} [transformDraggedElement]
@@ -2512,12 +2527,13 @@
         dragDisabled = options.dragDisabled,
         morphDisabled = options.morphDisabled,
         dropFromOthersDisabled = options.dropFromOthersDisabled,
+        zoneTabIndex = options.zoneTabIndex,
         dropTargetStyle = options.dropTargetStyle,
         dropTargetClasses = options.dropTargetClasses,
         transformDraggedElement = options.transformDraggedElement,
         autoAriaDisabled = options.autoAriaDisabled,
         centreDraggedOnCursor = options.centreDraggedOnCursor,
-        rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
+        rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
     /*eslint-enable*/
 
 
@@ -2540,6 +2556,16 @@
     if (dropTargetClasses && !Array.isArray(dropTargetClasses)) {
       throw new Error("dropTargetClasses should be an array but instead it is a ".concat(_typeof(dropTargetClasses), ", ").concat(toString(dropTargetClasses)));
     }
+
+    if (zoneTabIndex && !isInt(zoneTabIndex)) {
+      throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
+    }
+  }
+
+  function isInt(value) {
+    return !isNaN(value) && function (x) {
+      return (x | 0) === x;
+    }(parseFloat(value));
   }
 
   exports.DRAGGED_ELEMENT_ID = DRAGGED_ELEMENT_ID;

package/dist/index.mjs

@@ -1737,6 +1737,10 @@ function dndzone(node, options) {
     var currentIdx = elToIdx.get(originalDragTarget);
     originIndex = currentIdx;
     originDropZone = originalDragTarget.parentElement;
+    /** @type {ShadowRoot | HTMLDocument} */
+
+    var rootNode = originDropZone.getRootNode();
+    var originDropZoneRoot = rootNode.body || rootNode;
     var items = config.items,
         type = config.type,
         centreDraggedOnCursor = config.centreDraggedOnCursor;
@@ -1751,12 +1755,12 @@ function dndzone(node, options) {
 
     function keepOriginalElementInDom() {
       if (!draggedEl.parentElement) {
-        document.body.appendChild(draggedEl); // to prevent the outline from disappearing
+        originDropZoneRoot.appendChild(draggedEl); // to prevent the outline from disappearing
 
         draggedEl.focus();
         watchDraggedElement();
         hideOriginalDragTarget(originalDragTarget);
-        document.body.appendChild(originalDragTarget);
+        originDropZoneRoot.appendChild(originalDragTarget);
       } else {
         window.requestAnimationFrame(keepOriginalElementInDom);
       }
@@ -2197,6 +2201,7 @@ function dndzone$1(node, options) {
     items: undefined,
     type: undefined,
     dragDisabled: false,
+    zoneTabIndex: 0,
     dropFromOthersDisabled: false,
     dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
     dropTargetClasses: [],
@@ -2369,6 +2374,8 @@ function dndzone$1(node, options) {
         newType = _ref2$type === void 0 ? DEFAULT_DROP_ZONE_TYPE$1 : _ref2$type,
         _ref2$dragDisabled = _ref2.dragDisabled,
         dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
+        _ref2$zoneTabIndex = _ref2.zoneTabIndex,
+        zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
         _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
         dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
         _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2380,6 +2387,7 @@ function dndzone$1(node, options) {
     config.items = _toConsumableArray(items);
     config.dragDisabled = dragDisabled;
     config.dropFromOthersDisabled = dropFromOthersDisabled;
+    config.zoneTabIndex = zoneTabIndex;
     config.dropTargetStyle = dropTargetStyle;
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
@@ -2397,7 +2405,13 @@ function dndzone$1(node, options) {
     config.type = newType;
     registerDropZone$1(node, newType);
     dzToConfig$1.set(node, config);
-    node.tabIndex = isDragging && (node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig$1.get(focusedDz).type) ? -1 : 0;
+
+    if (isDragging) {
+      node.tabIndex = node === focusedDz || focusedItem.contains(node) || config.dropFromOthersDisabled || focusedDz && config.type !== dzToConfig$1.get(focusedDz).type ? -1 : 0;
+    } else {
+      node.tabIndex = config.zoneTabIndex;
+    }
+
     node.addEventListener("focus", handleZoneFocus);
 
     var _loop = function _loop(i) {
@@ -2473,6 +2487,7 @@ function dndzone$1(node, options) {
  * @property {boolean} [dragDisabled]
  * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
  * @property {boolean} [dropFromOthersDisabled]
+ * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -2506,12 +2521,13 @@ function validateOptions(options) {
       dragDisabled = options.dragDisabled,
       morphDisabled = options.morphDisabled,
       dropFromOthersDisabled = options.dropFromOthersDisabled,
+      zoneTabIndex = options.zoneTabIndex,
       dropTargetStyle = options.dropTargetStyle,
       dropTargetClasses = options.dropTargetClasses,
       transformDraggedElement = options.transformDraggedElement,
       autoAriaDisabled = options.autoAriaDisabled,
       centreDraggedOnCursor = options.centreDraggedOnCursor,
-      rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
+      rest = _objectWithoutProperties(options, ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"]);
   /*eslint-enable*/
 
 
@@ -2534,6 +2550,16 @@ function validateOptions(options) {
   if (dropTargetClasses && !Array.isArray(dropTargetClasses)) {
     throw new Error("dropTargetClasses should be an array but instead it is a ".concat(_typeof(dropTargetClasses), ", ").concat(toString(dropTargetClasses)));
   }
+
+  if (zoneTabIndex && !isInt(zoneTabIndex)) {
+    throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
+  }
+}
+
+function isInt(value) {
+  return !isNaN(value) && function (x) {
+    return (x | 0) === x;
+  }(parseFloat(value));
 }
 
 export { DRAGGED_ELEMENT_ID, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID, SOURCES, TRIGGERS, alertToScreenReader, dndzone$2 as dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode };

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.8",
+    "version": "0.9.12",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -16,6 +16,7 @@ import {toString} from "./helpers/util";
  * @property {boolean} [dragDisabled]
  * @property {boolean} [morphDisabled] - whether dragged element should morph to zone dimensions
  * @property {boolean} [dropFromOthersDisabled]
+ * @property {number} [zoneTabIndex] - set the tabindex of the list container when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -49,6 +50,7 @@ function validateOptions(options) {
         dragDisabled,
         morphDisabled,
         dropFromOthersDisabled,
+        zoneTabIndex,
         dropTargetStyle,
         dropTargetClasses,
         transformDraggedElement,
@@ -70,4 +72,11 @@ function validateOptions(options) {
     if (dropTargetClasses && !Array.isArray(dropTargetClasses)) {
         throw new Error(`dropTargetClasses should be an array but instead it is a ${typeof dropTargetClasses}, ${toString(dropTargetClasses)}`);
     }
+    if (zoneTabIndex && !isInt(zoneTabIndex)) {
+        throw new Error(`zoneTabIndex should be a number but instead it is a ${typeof zoneTabIndex}, ${toString(zoneTabIndex)}`);
+    }
+}
+
+function isInt(value) {
+    return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value));
 }

package/src/keyboardAction.js

@@ -153,6 +153,7 @@ export function dndzone(node, options) {
         items: undefined,
         type: undefined,
         dragDisabled: false,
+        zoneTabIndex: 0,
         dropFromOthersDisabled: false,
         dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses: [],
@@ -266,6 +267,7 @@ export function dndzone(node, options) {
         items = [],
         type: newType = DEFAULT_DROP_ZONE_TYPE,
         dragDisabled = false,
+        zoneTabIndex = 0,
         dropFromOthersDisabled = false,
         dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses = [],
@@ -274,6 +276,7 @@ export function dndzone(node, options) {
         config.items = [...items];
         config.dragDisabled = dragDisabled;
         config.dropFromOthersDisabled = dropFromOthersDisabled;
+        config.zoneTabIndex = zoneTabIndex;
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
@@ -289,14 +292,18 @@ export function dndzone(node, options) {
         registerDropZone(node, newType);
         dzToConfig.set(node, config);
 
-        node.tabIndex =
-            isDragging &&
-            (node === focusedDz ||
+        if (isDragging) {
+            node.tabIndex =
+                node === focusedDz ||
                 focusedItem.contains(node) ||
                 config.dropFromOthersDisabled ||
-                (focusedDz && config.type !== dzToConfig.get(focusedDz).type))
+                (focusedDz && config.type !== dzToConfig.get(focusedDz).type)
                 ? -1
                 : 0;
+        } else {
+            node.tabIndex = config.zoneTabIndex;
+        }
+
         node.addEventListener("focus", handleZoneFocus);
 
         for (let i = 0; i < node.children.length; i++) {

package/src/pointerAction.js

@@ -378,6 +378,9 @@ export function dndzone(node, options) {
         const currentIdx = elToIdx.get(originalDragTarget);
         originIndex = currentIdx;
         originDropZone = originalDragTarget.parentElement;
+        /** @type {ShadowRoot | HTMLDocument} */
+        const rootNode = originDropZone.getRootNode();
+        const originDropZoneRoot = rootNode.body || rootNode;
         const {items, type, centreDraggedOnCursor} = config;
         draggedElData = {...items[currentIdx]};
         draggedElType = type;
@@ -390,12 +393,12 @@ export function dndzone(node, options) {
         // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
         function keepOriginalElementInDom() {
             if (!draggedEl.parentElement) {
-                document.body.appendChild(draggedEl);
+                originDropZoneRoot.appendChild(draggedEl);
                 // to prevent the outline from disappearing
                 draggedEl.focus();
                 watchDraggedElement();
                 hideOriginalDragTarget(originalDragTarget);
-                document.body.appendChild(originalDragTarget);
+                originDropZoneRoot.appendChild(originalDragTarget);
             } else {
                 window.requestAnimationFrame(keepOriginalElementInDom);
             }