@vuu-ui/vuu-utils 4.0.1 → 5.0.0-alpha.1

package/src/vendor/@dnd-kit/dom/sortable.js

@@ -1,8 +1,8 @@
 import { WeakStore, effect, batch, untracked, reactive } from '../state/dist/index.js';
+import { Plugin, resolveCustomizable } from '../abstract/index.js';
 import { closestCorners, defaultCollisionDetection } from '../collision/dist/index.js';
-import { Scroller, Draggable, Droppable } from './index.js';
-import { isKeyboardEvent, DOMRectangle, getVisibleBoundingRectangle, scrollIntoViewIfNeeded, getComputedStyles, computeTranslate, animateTransform, ProxiedElements } from './utilities.js';
-import { Plugin } from '../abstract/index.js';
+import { Scroller, Draggable, Droppable, Feedback } from './index.js';
+import { isKeyboardEvent, DOMRectangle, getVisibleBoundingRectangle, scrollIntoViewIfNeeded, getComputedStyles, computeTranslate, prefersReducedMotion, getWindow, animateTransform, ProxiedElements } from './utilities.js';
 import { Rectangle } from '../geometry/dist/index.js';
 
 var __create = Object.create;
@@ -86,6 +86,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 function isSortable(element) {
   return element instanceof SortableDroppable || element instanceof SortableDraggable;
 }
+function isSortableOperation(operation) {
+  return isSortable(operation.source) && isSortable(operation.target);
+}
 
 // src/sortable/plugins/SortableKeyboardPlugin.ts
 var TOLERANCE = 10;
@@ -248,6 +251,13 @@ function arrayMove(array, from, to) {
   newArray.splice(to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }
+function getRecordKey(items, id) {
+  const key = String(id);
+  return Object.prototype.hasOwnProperty.call(items, key) ? key : void 0;
+}
+function hasSortableIndices(source) {
+  return "initialIndex" in source && typeof source.initialIndex === "number" && "index" in source && typeof source.index === "number";
+}
 function mutate(items, event, mutation) {
   var _a, _b;
   const { source, target, canceled } = event.operation;
@@ -255,11 +265,20 @@ function mutate(items, event, mutation) {
     if ("preventDefault" in event) event.preventDefault();
     return items;
   }
-  const findIndex = (item, id) => item === id || typeof item === "object" && "id" in item && item.id === id;
+  const findIndex = (item, id) => item === id || item !== null && typeof item === "object" && "id" in item && item.id === id;
   if (Array.isArray(items)) {
     const sourceIndex2 = items.findIndex((item) => findIndex(item, source.id));
     const targetIndex2 = items.findIndex((item) => findIndex(item, target.id));
     if (sourceIndex2 === -1 || targetIndex2 === -1) {
+      if (hasSortableIndices(source)) {
+        const from = source.initialIndex;
+        const to = source.index;
+        if (from === to || from < 0 || from >= items.length) {
+          if ("preventDefault" in event) event.preventDefault();
+          return items;
+        }
+        return mutation(items, from, to);
+      }
       return items;
     }
     if (!canceled && "index" in source && typeof source.index === "number") {
@@ -292,17 +311,80 @@ function mutate(items, event, mutation) {
       break;
     }
   }
+  if (sourceIndex === -1 && hasSortableIndices(source)) {
+    const srcParent = source.initialGroup == null ? void 0 : getRecordKey(items, source.initialGroup);
+    const srcIndex = source.initialIndex;
+    const tgtParent = source.group == null ? void 0 : getRecordKey(items, source.group);
+    const tgtIndex = source.index;
+    if (srcParent == null || tgtParent == null) {
+      if ("preventDefault" in event) event.preventDefault();
+      return items;
+    }
+    if (srcParent === tgtParent && srcIndex === tgtIndex) {
+      if ("preventDefault" in event) event.preventDefault();
+      return items;
+    }
+    if (srcParent === tgtParent) {
+      return __spreadProps2(__spreadValues2({}, items), {
+        [srcParent]: mutation(items[srcParent], srcIndex, tgtIndex)
+      });
+    }
+    const sourceItem2 = items[srcParent][srcIndex];
+    return __spreadProps2(__spreadValues2({}, items), {
+      [srcParent]: [
+        ...items[srcParent].slice(0, srcIndex),
+        ...items[srcParent].slice(srcIndex + 1)
+      ],
+      [tgtParent]: [
+        ...items[tgtParent].slice(0, tgtIndex),
+        sourceItem2,
+        ...items[tgtParent].slice(tgtIndex)
+      ]
+    });
+  }
   if (!source.manager) return items;
   const { dragOperation } = source.manager;
   const position = (_b = (_a = dragOperation.shape) == null ? void 0 : _a.current.center) != null ? _b : dragOperation.position.current;
   if (targetParent == null) {
-    if (target.id in items) {
-      const insertionIndex = target.shape && position.y > target.shape.center.y ? items[target.id].length : 0;
-      targetParent = target.id;
+    const targetKey = getRecordKey(items, target.id);
+    if (targetKey != null) {
+      const insertionIndex = target.shape && position.y > target.shape.center.y ? items[targetKey].length : 0;
+      targetParent = targetKey;
       targetIndex = insertionIndex;
     }
   }
   if (sourceParent == null || targetParent == null || sourceParent === targetParent && sourceIndex === targetIndex) {
+    if (sourceParent != null && sourceParent === targetParent && sourceIndex === targetIndex && hasSortableIndices(source)) {
+      const sourceGroupParent = source.group == null ? void 0 : getRecordKey(items, source.group);
+      const hasGroupChanged = source.group != null && sourceGroupParent !== sourceParent;
+      const hasIndexChanged = source.index !== sourceIndex;
+      if (hasGroupChanged || hasIndexChanged) {
+        const reconciledTargetParent = source.group == null ? sourceParent : sourceGroupParent;
+        if (reconciledTargetParent != null) {
+          if (sourceParent === reconciledTargetParent) {
+            return __spreadProps2(__spreadValues2({}, items), {
+              [sourceParent]: mutation(
+                items[sourceParent],
+                sourceIndex,
+                source.index
+              )
+            });
+          }
+          const sourceItem2 = items[sourceParent][sourceIndex];
+          return __spreadProps2(__spreadValues2({}, items), {
+            [sourceParent]: [
+              ...items[sourceParent].slice(0, sourceIndex),
+              ...items[sourceParent].slice(sourceIndex + 1)
+            ],
+            [reconciledTargetParent]: [
+              ...items[reconciledTargetParent].slice(0, source.index),
+              sourceItem2,
+              ...items[reconciledTargetParent].slice(source.index)
+            ]
+          });
+        }
+      }
+    }
     if ("preventDefault" in event) event.preventDefault();
     return items;
   }
@@ -329,6 +411,31 @@ function mutate(items, event, mutation) {
 function move(items, event) {
   return mutate(items, event, arrayMove);
 }
+
+// src/sortable/plugins/OptimisticSortingPlugin.helpers.ts
+function getSortableIndices(instances) {
+  const sortableIndices = /* @__PURE__ */ new Map();
+  for (const [, group] of instances) {
+    for (const sortable of group) {
+      sortableIndices.set(sortable.id, sortable.index);
+    }
+  }
+  return sortableIndices;
+}
+function hasChanged(snapshotIndices, instances, newInstances) {
+  var _a;
+  for (const [group, sortables] of instances) {
+    for (const sortable of sortables) {
+      const index = snapshotIndices.get(sortable.id);
+      if (sortable.index !== index || sortable.group !== group || !((_a = newInstances.get(group)) == null ? void 0 : _a.has(sortable))) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// src/sortable/plugins/OptimisticSortingPlugin.ts
 var defaultGroup = "__default__";
 var OptimisticSortingPlugin = class extends Plugin {
   constructor(manager) {
@@ -347,9 +454,6 @@ var OptimisticSortingPlugin = class extends Plugin {
           instances.add(sortable);
         }
       }
-      for (const [group, instances] of sortableInstances) {
-        sortableInstances.set(group, new Set(sort(instances)));
-      }
       return sortableInstances;
     };
     const unsubscribe = [
@@ -366,6 +470,7 @@ var OptimisticSortingPlugin = class extends Plugin {
           return;
         }
         const instances = getSortableInstances();
+        const sortableIndices = getSortableIndices(instances);
         const sameGroup = source.sortable.group === target.sortable.group;
         const sourceInstances = instances.get(source.sortable.group);
         const targetInstances = sameGroup ? sourceInstances : instances.get(target.sortable.group);
@@ -373,15 +478,10 @@ var OptimisticSortingPlugin = class extends Plugin {
         queueMicrotask(() => {
           if (event.defaultPrevented) return;
           manager2.renderer.rendering.then(() => {
-            var _a, _b, _c;
+            var _a, _b;
             const newInstances = getSortableInstances();
-            for (const [group, sortableInstances] of instances.entries()) {
-              const entries = Array.from(sortableInstances).entries();
-              for (const [index, sortable] of entries) {
-                if (sortable.index !== index || sortable.group !== group || !((_a = newInstances.get(group)) == null ? void 0 : _a.has(sortable))) {
-                  return;
-                }
-              }
+            if (hasChanged(sortableIndices, instances, newInstances)) {
+              return;
             }
             const sourceElement = source.sortable.element;
             const targetElement = target.sortable.element;
@@ -393,8 +493,8 @@ var OptimisticSortingPlugin = class extends Plugin {
             }
             const orderedSourceSortables = sort(sourceInstances);
             const orderedTargetSortables = sameGroup ? orderedSourceSortables : sort(targetInstances);
-            const sourceGroup = (_b = source.sortable.group) != null ? _b : defaultGroup;
-            const targetGroup = (_c = target.sortable.group) != null ? _c : defaultGroup;
+            const sourceGroup = (_a = source.sortable.group) != null ? _a : defaultGroup;
+            const targetGroup = (_b = target.sortable.group) != null ? _b : defaultGroup;
             const state = {
               [sourceGroup]: orderedSourceSortables,
               [targetGroup]: orderedTargetSortables
@@ -434,29 +534,31 @@ var OptimisticSortingPlugin = class extends Plugin {
         }
         queueMicrotask(() => {
           const instances = getSortableInstances();
+          const sortableIndices = getSortableIndices(instances);
           const initialGroupInstances = instances.get(
             source.sortable.initialGroup
           );
           if (!initialGroupInstances) return;
           manager2.renderer.rendering.then(() => {
-            for (const [group, sortableInstances] of instances.entries()) {
-              const entries = Array.from(sortableInstances).entries();
-              for (const [index, sortable] of entries) {
-                if (sortable.index !== index || sortable.group !== group) {
-                  return;
-                }
-              }
+            const newInstances = getSortableInstances();
+            if (hasChanged(sortableIndices, instances, newInstances)) {
+              return;
             }
-            const initialGroup = sort(initialGroupInstances);
+            const currentSortables = sort(initialGroupInstances);
+            const initialSortables = sort(
+              initialGroupInstances,
+              sortByInitialIndex
+            );
             const sourceElement = source.sortable.element;
-            const target = initialGroup[source.sortable.initialIndex];
+            const initialPosition = initialSortables.indexOf(source.sortable);
+            const target = currentSortables[initialPosition];
             const targetElement = target == null ? void 0 : target.element;
             if (!target || !targetElement || !sourceElement) {
               return;
             }
             reorder(sourceElement, target.index, targetElement, source.index);
             batch(() => {
-              for (const [_, sortableInstances] of instances.entries()) {
+              for (const sortableInstances of instances.values()) {
                 const entries = Array.from(sortableInstances).values();
                 for (const sortable of entries) {
                   sortable.index = sortable.initialIndex;
@@ -482,8 +584,11 @@ function reorder(sourceElement, sourceIndex, targetElement, targetIndex) {
 function sortByIndex(a, b) {
   return a.index - b.index;
 }
-function sort(instances) {
-  return Array.from(instances).sort(sortByIndex);
+function sortByInitialIndex(a, b) {
+  return a.initialIndex - b.initialIndex;
+}
+function sort(instances, sortFn = sortByIndex) {
+  return Array.from(instances).sort(sortFn);
 }
 
 // src/sortable/sortable.ts
@@ -496,6 +601,22 @@ var defaultSortableTransition = {
   easing: "cubic-bezier(0.25, 1, 0.5, 1)",
   idle: false
 };
+function resolveSortableTransition(transition) {
+  return transition === null ? null : __spreadValues(__spreadValues({}, defaultSortableTransition), transition);
+}
+function normalizeDisabled(disabled) {
+  var _a, _b;
+  if (typeof disabled === "boolean") {
+    return {
+      draggable: disabled,
+      droppable: disabled
+    };
+  }
+  return {
+    draggable: (_a = disabled == null ? void 0 : disabled.draggable) != null ? _a : false,
+    droppable: (_b = disabled == null ? void 0 : disabled.droppable) != null ? _b : false
+  };
+}
 var store = new WeakStore();
 var _group_dec, _index_dec, _init, _index, _previousGroup, _previousIndex, _group, _element;
 _index_dec = [reactive], _group_dec = [reactive];
@@ -529,14 +650,16 @@ var Sortable2 = class {
     };
     var _b = _a, {
       effects: inputEffects = () => [],
+      disabled,
       group,
       index,
       sensors,
       type,
       transition = defaultSortableTransition,
-      plugins = defaultPlugins
+      plugins: pluginsInput
     } = _b, input = __objRest(_b, [
       "effects",
+      "disabled",
       "group",
       "index",
       "sensors",
@@ -544,14 +667,22 @@ var Sortable2 = class {
       "transition",
       "plugins"
     ]);
-    this.droppable = new SortableDroppable(input, manager, this);
+    const plugins = resolveCustomizable(pluginsInput, defaultPlugins);
+    const disabledState = normalizeDisabled(disabled);
+    this.droppable = new SortableDroppable(
+      __spreadProps(__spreadValues({}, input), { disabled: disabledState.droppable }),
+      manager,
+      this
+    );
     this.draggable = new SortableDraggable(
       __spreadProps(__spreadValues({}, input), {
+        disabled: disabledState.draggable,
+        plugins,
         effects: () => [
           () => {
             var _a2, _b2, _c;
             const status = (_a2 = this.manager) == null ? void 0 : _a2.dragOperation.status;
-            if ((status == null ? void 0 : status.initializing) && this.id === ((_c = (_b2 = this.manager) == null ? void 0 : _b2.dragOperation.source) == null ? void 0 : _c.id)) {
+            if ((status == null ? void 0 : status.initializationPending) && this.id === ((_c = (_b2 = this.manager) == null ? void 0 : _b2.dragOperation.source) == null ? void 0 : _c.id)) {
               store.clear(this.manager);
             }
             if (status == null ? void 0 : status.dragging) {
@@ -576,18 +707,14 @@ var Sortable2 = class {
             }
           },
           () => {
+            var _a2, _b2;
             const { target } = this;
-            const { feedback, isDragSource } = this.draggable;
-            if (feedback == "move" && isDragSource) {
+            const { isDragSource } = this.draggable;
+            const feedback = (_b2 = (_a2 = this.draggable.pluginConfig(Feedback)) == null ? void 0 : _a2.feedback) != null ? _b2 : "default";
+            if (feedback === "move" && isDragSource) {
               this.droppable.disabled = !target;
             }
           },
-          () => {
-            const { manager: manager2 } = this;
-            for (const plugin of plugins) {
-              manager2 == null ? void 0 : manager2.registry.register(plugin);
-            }
-          },
           ...inputEffects()
         ],
         type,
@@ -627,6 +754,11 @@ var Sortable2 = class {
         if (!element) {
           return;
         }
+        for (const animation of element.getAnimations()) {
+          if ("transitionProperty" in animation && (animation.transitionProperty === "transform" || animation.transitionProperty === "translate" || animation.transitionProperty === "scale")) {
+            animation.cancel();
+          }
+        }
         const updatedShape = this.refreshShape();
         if (!updatedShape) {
           return;
@@ -639,6 +771,7 @@ var Sortable2 = class {
         const currentTranslate = computeTranslate(element, translate, false);
         const finalTranslate = computeTranslate(element, translate);
         if (delta.x || delta.y) {
+          const resolvedTransition = prefersReducedMotion(getWindow(element)) ? __spreadProps(__spreadValues({}, transition), { duration: 0 }) : transition;
           animateTransform({
             element,
             keyframes: {
@@ -647,7 +780,7 @@ var Sortable2 = class {
                 `${finalTranslate.x}px ${finalTranslate.y}px ${finalTranslate.z}`
               ]
             },
-            options: transition
+            options: resolvedTransition
           }).then(() => {
             if (!manager.dragOperation.status.dragging) {
               this.droppable.shape = void 0;
@@ -699,15 +832,18 @@ var Sortable2 = class {
     return this.draggable.element;
   }
   get disabled() {
-    return this.draggable.disabled && this.droppable.disabled;
+    const { disabled: draggable } = this.draggable;
+    const { disabled: droppable } = this.droppable;
+    return draggable === droppable ? draggable : { draggable, droppable };
   }
-  set feedback(value) {
-    this.draggable.feedback = value;
+  set plugins(value) {
+    this.draggable.plugins = resolveCustomizable(value, defaultPlugins);
   }
   set disabled(value) {
+    const disabled = normalizeDisabled(value);
     batch(() => {
-      this.droppable.disabled = value;
-      this.draggable.disabled = value;
+      this.droppable.disabled = disabled.droppable;
+      this.draggable.disabled = disabled.draggable;
     });
   }
   set data(data) {
@@ -720,10 +856,8 @@ var Sortable2 = class {
     this.draggable.handle = handle;
   }
   set id(id) {
-    batch(() => {
-      this.droppable.id = id;
-      this.draggable.id = id;
-    });
+    this.droppable.id = id;
+    this.draggable.id = id;
   }
   get id() {
     return this.droppable.id;
@@ -809,14 +943,29 @@ var SortableDraggable = class extends Draggable {
   get index() {
     return this.sortable.index;
   }
+  get initialIndex() {
+    return this.sortable.initialIndex;
+  }
+  get group() {
+    return this.sortable.group;
+  }
+  get initialGroup() {
+    return this.sortable.initialGroup;
+  }
 };
 var SortableDroppable = class extends Droppable {
   constructor(input, manager, sortable) {
     super(input, manager);
     this.sortable = sortable;
   }
+  get index() {
+    return this.sortable.index;
+  }
+  get group() {
+    return this.sortable.group;
+  }
 };
 
-export { OptimisticSortingPlugin, Sortable2 as Sortable, SortableKeyboardPlugin, defaultSortableTransition, isSortable };
+export { OptimisticSortingPlugin, Sortable2 as Sortable, SortableDraggable, SortableDroppable, SortableKeyboardPlugin, defaultSortableTransition, isSortable, isSortableOperation, resolveSortableTransition };
 //# sourceMappingURL=sortable.js.map
 //# sourceMappingURL=sortable.js.map