svelte-dnd-action 0.9.29 → 0.9.31

package/README.md

@@ -106,12 +106,13 @@ An options-object with the following attributes:
 | Name | Type | Required? | Default Value | Description |
 | ------------------------- | -------------- | ------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------ |
 | `items` | Array<Object> | Yes. Each object in the array **has to have** an `id` property (key name can be overridden globally) with a unique value (within all dnd-zones of the same type) | N/A | The data array that is used to produce the list with the draggable items (the same thing you run your #each block on). The dndzone should not have children that don't originate in `items` |
-| `flipDurationMs` | Number | No | `0` | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero or leave out if you don't want animations |
+| `flipDurationMs` | Number | No | `0` | The same value you give the flip animation on the items (to make them animated as they "make space" for the dragged item). Set to zero if you dont want animations, if unset it defaults to 100ms |
 | `type` | String | No | Internal | dnd-zones that share the same type can have elements from one dragged into another. By default, all dnd-zones have the same type |
 | `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. |
+| `zoneItemTabIndex` | Number | No | `0` | Allow user to set custom tabindex to the list container items when not dragging. Can be useful if you use [Drag handles](https://github.com/isaacHagoel/svelte-dnd-action#examples-and-recipes). 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 |

package/dist/index.d.ts

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

package/dist/index.js

@@ -1226,6 +1226,7 @@
 
   var DEFAULT_DROP_ZONE_TYPE = "--any--";
   var MIN_OBSERVATION_INTERVAL_MS = 100;
+  var DISABLED_OBSERVATION_INTERVAL_MS = 20;
   var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
   var DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
@@ -1298,9 +1299,10 @@
     }
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-    var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+    var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
       return dzToConfig.get(dz).dropAnimationDurationMs;
-    }))));
+    })));
+    var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
     observe(draggedEl, dropZones, observationIntervalMs * 1.07);
   }
   function unWatchDraggedElement() {
@@ -2116,6 +2118,7 @@
       type: undefined,
       dragDisabled: false,
       zoneTabIndex: 0,
+      zoneItemTabIndex: 0,
       dropFromOthersDisabled: false,
       dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
       dropTargetClasses: [],
@@ -2245,7 +2248,7 @@
       var children = Array.from(node.children);
       var focusedItemIdx = children.indexOf(draggableEl);
       focusedItem = draggableEl;
-      focusedItem.tabIndex = 0;
+      focusedItem.tabIndex = config.zoneItemTabIndex;
       focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
       focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
     }
@@ -2258,6 +2261,8 @@
         dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
         _ref2$zoneTabIndex = _ref2.zoneTabIndex,
         zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
+        _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
+        zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
         _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
         dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
         _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2270,6 +2275,7 @@
       config.dragDisabled = dragDisabled;
       config.dropFromOthersDisabled = dropFromOthersDisabled;
       config.zoneTabIndex = zoneTabIndex;
+      config.zoneItemTabIndex = zoneItemTabIndex;
       config.dropTargetStyle = dropTargetStyle;
       config.dropTargetClasses = dropTargetClasses;
       config.autoAriaDisabled = autoAriaDisabled;
@@ -2293,7 +2299,7 @@
       var _loop = function _loop(i) {
         var draggableEl = node.children[i];
         allDragTargets.add(draggableEl);
-        draggableEl.tabIndex = isDragging ? -1 : 0;
+        draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
         if (!autoAriaDisabled) {
           draggableEl.setAttribute("role", "listitem");
         }
@@ -2314,7 +2320,7 @@
           });
           // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
           focusedItem = draggableEl;
-          focusedItem.tabIndex = 0;
+          focusedItem.tabIndex = config.zoneItemTabIndex;
           // without this the element loses focus if it moves backwards in the list
           draggableEl.focus();
         }
@@ -2344,7 +2350,7 @@
     return handles;
   }
 
-  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
+  var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
 
   /**
    * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2360,6 +2366,7 @@
    * @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 {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
    * @property {object} [dropTargetStyle]
    * @property {string[]} [dropTargetClasses]
    * @property {function} [transformDraggedElement]
@@ -2408,6 +2415,7 @@
       morphDisabled = options.morphDisabled,
       dropFromOthersDisabled = options.dropFromOthersDisabled,
       zoneTabIndex = options.zoneTabIndex,
+      zoneItemTabIndex = options.zoneItemTabIndex,
       dropTargetStyle = options.dropTargetStyle,
       dropTargetClasses = options.dropTargetClasses,
       transformDraggedElement = options.transformDraggedElement,
@@ -2433,6 +2441,9 @@
     if (zoneTabIndex && !isInt(zoneTabIndex)) {
       throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
     }
+    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+      throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
+    }
   }
   function isInt(value) {
     return !isNaN(value) && function (x) {

package/dist/index.mjs

@@ -1220,6 +1220,7 @@ function preventShrinking(el) {
 
 var DEFAULT_DROP_ZONE_TYPE = "--any--";
 var MIN_OBSERVATION_INTERVAL_MS = 100;
+var DISABLED_OBSERVATION_INTERVAL_MS = 20;
 var MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
 var DEFAULT_DROP_TARGET_STYLE = {
   outline: "rgba(255, 255, 102, 0.7) solid 2px"
@@ -1292,9 +1293,10 @@ function watchDraggedElement() {
   }
   window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
   // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-  var observationIntervalMs = Math.max.apply(Math, [MIN_OBSERVATION_INTERVAL_MS].concat(_toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
+  var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
     return dzToConfig.get(dz).dropAnimationDurationMs;
-  }))));
+  })));
+  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
   observe(draggedEl, dropZones, observationIntervalMs * 1.07);
 }
 function unWatchDraggedElement() {
@@ -2110,6 +2112,7 @@ function dndzone$1(node, options) {
     type: undefined,
     dragDisabled: false,
     zoneTabIndex: 0,
+    zoneItemTabIndex: 0,
     dropFromOthersDisabled: false,
     dropTargetStyle: DEFAULT_DROP_TARGET_STYLE$1,
     dropTargetClasses: [],
@@ -2239,7 +2242,7 @@ function dndzone$1(node, options) {
     var children = Array.from(node.children);
     var focusedItemIdx = children.indexOf(draggableEl);
     focusedItem = draggableEl;
-    focusedItem.tabIndex = 0;
+    focusedItem.tabIndex = config.zoneItemTabIndex;
     focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
     focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
   }
@@ -2252,6 +2255,8 @@ function dndzone$1(node, options) {
       dragDisabled = _ref2$dragDisabled === void 0 ? false : _ref2$dragDisabled,
       _ref2$zoneTabIndex = _ref2.zoneTabIndex,
       zoneTabIndex = _ref2$zoneTabIndex === void 0 ? 0 : _ref2$zoneTabIndex,
+      _ref2$zoneItemTabInde = _ref2.zoneItemTabIndex,
+      zoneItemTabIndex = _ref2$zoneItemTabInde === void 0 ? 0 : _ref2$zoneItemTabInde,
       _ref2$dropFromOthersD = _ref2.dropFromOthersDisabled,
       dropFromOthersDisabled = _ref2$dropFromOthersD === void 0 ? false : _ref2$dropFromOthersD,
       _ref2$dropTargetStyle = _ref2.dropTargetStyle,
@@ -2264,6 +2269,7 @@ function dndzone$1(node, options) {
     config.dragDisabled = dragDisabled;
     config.dropFromOthersDisabled = dropFromOthersDisabled;
     config.zoneTabIndex = zoneTabIndex;
+    config.zoneItemTabIndex = zoneItemTabIndex;
     config.dropTargetStyle = dropTargetStyle;
     config.dropTargetClasses = dropTargetClasses;
     config.autoAriaDisabled = autoAriaDisabled;
@@ -2287,7 +2293,7 @@ function dndzone$1(node, options) {
     var _loop = function _loop(i) {
       var draggableEl = node.children[i];
       allDragTargets.add(draggableEl);
-      draggableEl.tabIndex = isDragging ? -1 : 0;
+      draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
       if (!autoAriaDisabled) {
         draggableEl.setAttribute("role", "listitem");
       }
@@ -2308,7 +2314,7 @@ function dndzone$1(node, options) {
         });
         // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0;
+        focusedItem.tabIndex = config.zoneItemTabIndex;
         // without this the element loses focus if it moves backwards in the list
         draggableEl.focus();
       }
@@ -2338,7 +2344,7 @@ function dndzone$1(node, options) {
   return handles;
 }
 
-var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
+var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabled", "dropFromOthersDisabled", "zoneTabIndex", "zoneItemTabIndex", "dropTargetStyle", "dropTargetClasses", "transformDraggedElement", "autoAriaDisabled", "centreDraggedOnCursor"];
 
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
@@ -2354,6 +2360,7 @@ var _excluded = ["items", "flipDurationMs", "type", "dragDisabled", "morphDisabl
  * @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 {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -2402,6 +2409,7 @@ function validateOptions(options) {
     morphDisabled = options.morphDisabled,
     dropFromOthersDisabled = options.dropFromOthersDisabled,
     zoneTabIndex = options.zoneTabIndex,
+    zoneItemTabIndex = options.zoneItemTabIndex,
     dropTargetStyle = options.dropTargetStyle,
     dropTargetClasses = options.dropTargetClasses,
     transformDraggedElement = options.transformDraggedElement,
@@ -2427,6 +2435,9 @@ function validateOptions(options) {
   if (zoneTabIndex && !isInt(zoneTabIndex)) {
     throw new Error("zoneTabIndex should be a number but instead it is a ".concat(_typeof(zoneTabIndex), ", ").concat(toString(zoneTabIndex)));
   }
+  if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+    throw new Error("zoneItemTabIndex should be a number but instead it is a ".concat(_typeof(zoneItemTabIndex), ", ").concat(toString(zoneItemTabIndex)));
+  }
 }
 function isInt(value) {
   return !isNaN(value) && function (x) {

package/package.json

@@ -43,7 +43,7 @@
         "dist"
     ],
     "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.29",
+    "version": "0.9.31",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/action.js

@@ -17,6 +17,7 @@ import {toString} from "./helpers/util";
  * @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 {number} [zoneItemTabIndex] - set the tabindex of the list container items when not dragging
  * @property {object} [dropTargetStyle]
  * @property {string[]} [dropTargetClasses]
  * @property {function} [transformDraggedElement]
@@ -67,6 +68,7 @@ function validateOptions(options) {
         morphDisabled,
         dropFromOthersDisabled,
         zoneTabIndex,
+        zoneItemTabIndex,
         dropTargetStyle,
         dropTargetClasses,
         transformDraggedElement,
@@ -91,6 +93,9 @@ function validateOptions(options) {
     if (zoneTabIndex && !isInt(zoneTabIndex)) {
         throw new Error(`zoneTabIndex should be a number but instead it is a ${typeof zoneTabIndex}, ${toString(zoneTabIndex)}`);
     }
+    if (zoneItemTabIndex && !isInt(zoneItemTabIndex)) {
+        throw new Error(`zoneItemTabIndex should be a number but instead it is a ${typeof zoneItemTabIndex}, ${toString(zoneItemTabIndex)}`);
+    }
 }
 
 function isInt(value) {

package/src/keyboardAction.js

@@ -157,6 +157,7 @@ export function dndzone(node, options) {
         type: undefined,
         dragDisabled: false,
         zoneTabIndex: 0,
+        zoneItemTabIndex: 0,
         dropFromOthersDisabled: false,
         dropTargetStyle: DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses: [],
@@ -261,7 +262,7 @@ export function dndzone(node, options) {
         const children = Array.from(node.children);
         const focusedItemIdx = children.indexOf(draggableEl);
         focusedItem = draggableEl;
-        focusedItem.tabIndex = 0;
+        focusedItem.tabIndex = config.zoneItemTabIndex;
         focusedItemId = items[focusedItemIdx][ITEM_ID_KEY];
         focusedItemLabel = children[focusedItemIdx].getAttribute("aria-label") || "";
     }
@@ -271,6 +272,7 @@ export function dndzone(node, options) {
         type: newType = DEFAULT_DROP_ZONE_TYPE,
         dragDisabled = false,
         zoneTabIndex = 0,
+        zoneItemTabIndex = 0,
         dropFromOthersDisabled = false,
         dropTargetStyle = DEFAULT_DROP_TARGET_STYLE,
         dropTargetClasses = [],
@@ -280,6 +282,7 @@ export function dndzone(node, options) {
         config.dragDisabled = dragDisabled;
         config.dropFromOthersDisabled = dropFromOthersDisabled;
         config.zoneTabIndex = zoneTabIndex;
+        config.zoneItemTabIndex = zoneItemTabIndex;
         config.dropTargetStyle = dropTargetStyle;
         config.dropTargetClasses = dropTargetClasses;
         config.autoAriaDisabled = autoAriaDisabled;
@@ -312,7 +315,7 @@ export function dndzone(node, options) {
         for (let i = 0; i < node.children.length; i++) {
             const draggableEl = node.children[i];
             allDragTargets.add(draggableEl);
-            draggableEl.tabIndex = isDragging ? -1 : 0;
+            draggableEl.tabIndex = isDragging ? -1 : config.zoneItemTabIndex;
             if (!autoAriaDisabled) {
                 draggableEl.setAttribute("role", "listitem");
             }
@@ -328,7 +331,7 @@ export function dndzone(node, options) {
                 printDebug(() => ["focusing on", {i, focusedItemId}]);
                 // if it is a nested dropzone, it was re-rendered and we need to refresh our pointer
                 focusedItem = draggableEl;
-                focusedItem.tabIndex = 0;
+                focusedItem.tabIndex = config.zoneItemTabIndex;
                 // without this the element loses focus if it moves backwards in the list
                 draggableEl.focus();
             }

package/src/pointerAction.js

@@ -36,6 +36,7 @@ import {getBoundingRectNoTransforms} from "./helpers/intersection";
 
 const DEFAULT_DROP_ZONE_TYPE = "--any--";
 const MIN_OBSERVATION_INTERVAL_MS = 100;
+const DISABLED_OBSERVATION_INTERVAL_MS = 20;
 const MIN_MOVEMENT_BEFORE_DRAG_START_PX = 3;
 const DEFAULT_DROP_TARGET_STYLE = {
     outline: "rgba(255, 255, 102, 0.7) solid 2px"
@@ -96,10 +97,8 @@ function watchDraggedElement() {
     }
     window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
     // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
-    const observationIntervalMs = Math.max(
-        MIN_OBSERVATION_INTERVAL_MS,
-        ...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs)
-    );
+    const setIntervalMs = Math.max(...Array.from(dropZones.keys()).map(dz => dzToConfig.get(dz).dropAnimationDurationMs));
+    const observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
     observe(draggedEl, dropZones, observationIntervalMs * 1.07);
 }
 function unWatchDraggedElement() {