@dnd-kit/dom 0.0.1

package/sortable.cjs

@@ -0,0 +1,531 @@
+'use strict';
+
+var state = require('@dnd-kit/state');
+var abstract = require('@dnd-kit/abstract');
+var collision = require('@dnd-kit/collision');
+var dom = require('@dnd-kit/dom');
+var utilities = require('@dnd-kit/dom/utilities');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// src/sortable/utilities.ts
+function isSortable(element) {
+  return element instanceof SortableDroppable || element instanceof SortableDraggable;
+}
+
+// src/sortable/SortableKeyboardPlugin.ts
+var TOLERANCE = 10;
+var SortableKeyboardPlugin = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    const cleanupEffect = state.effect(() => {
+      const { dragOperation } = manager;
+      if (!utilities.isKeyboardEvent(dragOperation.activatorEvent)) {
+        return;
+      }
+      if (!isSortable(dragOperation.source)) {
+        return;
+      }
+      if (dragOperation.status.initialized) {
+        const scroller = manager.registry.plugins.get(dom.Scroller);
+        if (scroller) {
+          scroller.disable();
+          return () => scroller.enable();
+        }
+      }
+    });
+    const unsubscribe = manager.monitor.addEventListener(
+      "dragmove",
+      (event, manager2) => {
+        queueMicrotask(() => {
+          if (this.disabled || event.defaultPrevented) {
+            return;
+          }
+          const { dragOperation } = manager2;
+          if (!utilities.isKeyboardEvent(dragOperation.activatorEvent)) {
+            return;
+          }
+          if (!isSortable(dragOperation.source)) {
+            return;
+          }
+          if (!dragOperation.shape) {
+            return;
+          }
+          const { actions, collisionObserver, registry } = manager2;
+          const { by } = event;
+          if (!by) {
+            return;
+          }
+          const direction = getDirection(by);
+          const { source } = dragOperation;
+          const { center } = dragOperation.shape.current;
+          const potentialTargets = [];
+          for (const droppable of registry.droppables) {
+            const { shape, id: id2 } = droppable;
+            if (!shape || id2 === source?.id && isSortable(droppable) || source?.type != null && !droppable.accepts(source)) {
+              continue;
+            }
+            switch (direction) {
+              case "down":
+                if (center.y + TOLERANCE < shape.center.y) {
+                  potentialTargets.push(droppable);
+                }
+                break;
+              case "up":
+                if (center.y - TOLERANCE > shape.center.y) {
+                  potentialTargets.push(droppable);
+                }
+                break;
+              case "left":
+                if (center.x - TOLERANCE > shape.center.x) {
+                  potentialTargets.push(droppable);
+                }
+                break;
+              case "right":
+                if (center.x + TOLERANCE < shape.center.x) {
+                  potentialTargets.push(droppable);
+                }
+                break;
+            }
+          }
+          event.preventDefault();
+          collisionObserver.disable();
+          const collisions = collisionObserver.computeCollisions(
+            potentialTargets,
+            collision.closestCenter
+          );
+          const [firstCollision] = collisions;
+          if (!firstCollision) {
+            return;
+          }
+          const { id } = firstCollision;
+          actions.setDropTarget(id).then(() => {
+            const { source: source2 } = dragOperation;
+            if (!source2) {
+              return;
+            }
+            const droppable = registry.droppables.get(source2.id);
+            if (!droppable?.element) {
+              return;
+            }
+            const { element } = droppable;
+            utilities.scrollIntoViewIfNeeded(element);
+            utilities.scheduler.schedule(() => {
+              const shape = droppable.refreshShape();
+              if (!shape) {
+                return;
+              }
+              actions.move({
+                to: {
+                  x: shape.center.x,
+                  y: shape.center.y
+                }
+              });
+              actions.setDropTarget(source2.id).then(() => {
+                dragOperation.shape = shape;
+                collisionObserver.enable();
+              });
+            });
+          });
+        });
+      }
+    );
+    this.destroy = () => {
+      unsubscribe();
+      cleanupEffect();
+    };
+  }
+};
+function getDirection(delta) {
+  const { x, y } = delta;
+  if (x > 0) {
+    return "right";
+  } else if (x < 0) {
+    return "left";
+  } else if (y > 0) {
+    return "down";
+  } else if (y < 0) {
+    return "up";
+  }
+}
+
+// ../helpers/dist/index.js
+function arrayMove(array, from, to) {
+  if (from === to) {
+    return array;
+  }
+  const newArray = array.slice();
+  newArray.splice(to, 0, newArray.splice(from, 1)[0]);
+  return newArray;
+}
+var OptimisticSortingPlugin = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    const getSortableInstances = (group) => {
+      const sortableInstances = /* @__PURE__ */ new Map();
+      for (const droppable of manager.registry.droppables) {
+        if (droppable instanceof SortableDroppable) {
+          const { sortable } = droppable;
+          if (sortable.group !== group) {
+            continue;
+          }
+          if (sortableInstances.has(sortable.index)) {
+            throw new Error(
+              "Duplicate sortable index found for same sortable group. Make sure each sortable item has a unique index. Use the `group` attribute to separate sortables into different groups."
+            );
+          }
+          sortableInstances.set(sortable.index, sortable);
+        }
+      }
+      return sortableInstances;
+    };
+    const unsubscribe = [
+      manager.monitor.addEventListener("dragover", (event, manager2) => {
+        queueMicrotask(() => {
+          if (this.disabled || event.defaultPrevented) {
+            return;
+          }
+          const { dragOperation } = manager2;
+          const { source, target } = dragOperation;
+          if (!isSortable(source) || !isSortable(target)) {
+            return;
+          }
+          if (source.sortable === target.sortable) {
+            return;
+          }
+          if (source.sortable.group !== target.sortable.group) {
+            return;
+          }
+          const sortableInstances = getSortableInstances(source.sortable.group);
+          manager2.renderer.rendering.then(() => {
+            for (const [index, sortable] of sortableInstances.entries()) {
+              if (sortable.index !== index) {
+                return;
+              }
+            }
+            const orderedSortables = Array.from(
+              sortableInstances.values()
+            ).sort((a, b) => a.index - b.index);
+            const newOrder = arrayMove(
+              orderedSortables,
+              source.sortable.index,
+              target.sortable.index
+            );
+            const sourceElement = source.sortable.droppable.element;
+            const targetElement = target.element;
+            if (!targetElement || !sourceElement) {
+              return;
+            }
+            reorder(
+              sourceElement,
+              source.sortable.index,
+              targetElement,
+              target.sortable.index
+            );
+            const position = target.sortable.index < source.sortable.index ? "beforebegin" : "afterend";
+            targetElement.insertAdjacentElement(position, sourceElement);
+            state.batch(() => {
+              for (const [index, sortable] of newOrder.entries()) {
+                sortable.index = index;
+              }
+            });
+          });
+        });
+      }),
+      manager.monitor.addEventListener("dragend", (event, manager2) => {
+        if (!event.canceled) {
+          return;
+        }
+        const { dragOperation } = manager2;
+        const { source } = dragOperation;
+        if (!isSortable(source)) {
+          return;
+        }
+        if (source.sortable.initialIndex === source.sortable.index) {
+          return;
+        }
+        queueMicrotask(() => {
+          const sortableInstances = getSortableInstances(source.sortable.group);
+          manager2.renderer.rendering.then(() => {
+            for (const [index, sortable] of sortableInstances.entries()) {
+              if (sortable.index !== index) {
+                return;
+              }
+            }
+            const orderedSortables = Array.from(
+              sortableInstances.values()
+            ).sort((a, b) => a.index - b.index);
+            const sourceElement = source.sortable.droppable.element;
+            const targetElement = orderedSortables[source.sortable.initialIndex].element;
+            if (!targetElement || !sourceElement) {
+              return;
+            }
+            reorder(
+              sourceElement,
+              source.sortable.index,
+              targetElement,
+              source.sortable.initialIndex
+            );
+            state.batch(() => {
+              for (const sortable of orderedSortables.values()) {
+                sortable.index = sortable.initialIndex;
+              }
+            });
+          });
+        });
+      })
+    ];
+    this.destroy = () => {
+      for (const unsubscribeListener of unsubscribe) {
+        unsubscribeListener();
+      }
+    };
+  }
+};
+function reorder(sourceElement, sourceIndex, targetElement, targetIndex) {
+  const position = targetIndex < sourceIndex ? "beforebegin" : "afterend";
+  targetElement.insertAdjacentElement(position, sourceElement);
+}
+
+// src/sortable/sortable.ts
+var defaultPlugins = [
+  SortableKeyboardPlugin,
+  OptimisticSortingPlugin
+];
+var defaultSortableTransition = {
+  duration: 250,
+  easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+  idle: false
+};
+var Sortable2 = class {
+  constructor({
+    effects: inputEffects,
+    group,
+    index,
+    sensors,
+    type,
+    transition = defaultSortableTransition,
+    plugins = defaultPlugins,
+    ...input
+  }, manager) {
+    this.manager = manager;
+    this.draggable = new SortableDraggable(
+      { ...input, type, sensors },
+      manager,
+      this
+    );
+    this.droppable = new SortableDroppable(input, manager, this);
+    for (const plugin of plugins) {
+      manager.registry.register(plugin);
+    }
+    this.index = index;
+    this.previousIndex = index;
+    this.initialIndex = index;
+    this.group = group;
+    this.type = type;
+    this.transition = transition;
+    const { destroy } = this;
+    const unsubscribe = this.manager.monitor.addEventListener(
+      "dragstart",
+      () => {
+        this.initialIndex = this.index;
+        this.previousIndex = this.index;
+      }
+    );
+    const cleanup = state.effects(
+      () => {
+        const { index: index2, previousIndex } = this;
+        if (index2 === previousIndex) {
+          return;
+        }
+        this.previousIndex = index2;
+        this.animate();
+      },
+      () => {
+        const { target } = this;
+        const { feedback, isDragSource } = this.draggable;
+        if (feedback == "move" && isDragSource) {
+          this.droppable.disabled = !target;
+        }
+      },
+      () => {
+        const { element } = this;
+        this.droppable.element = element;
+        this.draggable.element = element;
+      },
+      () => {
+        const { target } = this;
+        const element = state.untracked(() => this.element);
+        this.droppable.element = !target && element ? element : target;
+      },
+      () => {
+        const { source } = this;
+        const element = state.untracked(() => this.element);
+        this.draggable.element = !source && element ? element : source;
+      },
+      ...inputEffects?.(this) ?? []
+    );
+    this.destroy = () => {
+      destroy.bind(this)();
+      unsubscribe();
+      cleanup();
+    };
+  }
+  animate() {
+    state.untracked(() => {
+      const { manager, transition } = this;
+      const { shape } = this.droppable;
+      const { idle } = manager.dragOperation.status;
+      if (!shape || !transition || idle && !transition.idle) {
+        return;
+      }
+      utilities.scheduler.schedule(() => {
+        const { element } = this.droppable;
+        if (!element) {
+          return;
+        }
+        this.refreshShape();
+        const updatedShape = this.droppable.shape;
+        if (!updatedShape) {
+          return;
+        }
+        const delta = {
+          x: shape.boundingRectangle.left - updatedShape.boundingRectangle.left,
+          y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top
+        };
+        if (delta.x || delta.y) {
+          utilities.animateTransform({
+            element,
+            keyframes: {
+              translate: [`${delta.x}px ${delta.y}px 0`, "0px 0px 0"]
+            },
+            options: transition,
+            onFinish: () => {
+              if (idle) {
+                this.droppable.shape = void 0;
+              }
+            }
+          });
+        }
+      });
+    });
+  }
+  get disabled() {
+    return this.draggable.disabled && this.droppable.disabled;
+  }
+  set feedback(value) {
+    this.draggable.feedback = value;
+  }
+  set disabled(value) {
+    state.batch(() => {
+      this.draggable.disabled = value;
+      this.droppable.disabled = value;
+    });
+  }
+  set data(data) {
+    state.batch(() => {
+      this.draggable.data = data;
+      this.droppable.data = data;
+    });
+  }
+  set handle(handle) {
+    this.draggable.handle = handle;
+  }
+  set id(id) {
+    state.batch(() => {
+      this.draggable.id = id;
+      this.droppable.id = id;
+    });
+  }
+  set sensors(value) {
+    this.draggable.sensors = value;
+  }
+  set collisionPriority(value) {
+    this.droppable.collisionPriority = value ?? abstract.CollisionPriority.Normal;
+  }
+  set collisionDetector(value) {
+    this.droppable.collisionDetector = value ?? collision.defaultCollisionDetection;
+  }
+  set type(type) {
+    this.draggable.type = type;
+    this.droppable.type = type;
+  }
+  get type() {
+    return this.draggable.type;
+  }
+  set accept(value) {
+    this.droppable.accept = value;
+  }
+  get accept() {
+    return this.droppable.accept;
+  }
+  get isDropTarget() {
+    return this.droppable.isDropTarget;
+  }
+  /**
+   * A boolean indicating whether the sortable item is the source of a drag operation.
+   */
+  get isDragSource() {
+    return this.draggable.isDragSource;
+  }
+  refreshShape(ignoreTransforms = true) {
+    this.droppable.refreshShape(ignoreTransforms);
+  }
+  accepts(draggable) {
+    return this.droppable.accepts(draggable);
+  }
+  destroy() {
+    this.draggable.destroy();
+    this.droppable.destroy();
+  }
+};
+__decorateClass([
+  state.reactive
+], Sortable2.prototype, "index");
+__decorateClass([
+  state.reactive
+], Sortable2.prototype, "group");
+__decorateClass([
+  state.reactive
+], Sortable2.prototype, "element");
+__decorateClass([
+  state.reactive
+], Sortable2.prototype, "source");
+__decorateClass([
+  state.reactive
+], Sortable2.prototype, "target");
+var SortableDraggable = class extends dom.Draggable {
+  constructor(input, manager, sortable) {
+    super(input, manager);
+    this.sortable = sortable;
+  }
+  get index() {
+    return this.sortable.index;
+  }
+};
+var SortableDroppable = class extends dom.Droppable {
+  constructor(input, manager, sortable) {
+    super(input, manager);
+    this.sortable = sortable;
+  }
+  refreshShape(ignoreTransforms = true) {
+    return super.refreshShape(ignoreTransforms);
+  }
+  get index() {
+    return this.sortable.index;
+  }
+};
+
+exports.Sortable = Sortable2;
+exports.defaultSortableTransition = defaultSortableTransition;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=sortable.cjs.map

package/sortable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/sortable/sortable.ts","src/sortable/SortableKeyboardPlugin.ts","src/sortable/utilities.ts","src/sortable/OptimisticSortingPlugin.ts","../helpers/dist/index.js"],"names":["batch","scheduler","manager","id","source","Plugin","Sortable","index"],"mappings":"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","sourcesContent":["import {batch, effects, reactive, untracked, type Effect} from '@dnd-kit/state';\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport type {\n  Data,\n  PluginConstructor,\n  Type,\n  UniqueIdentifier,\n} from '@dnd-kit/abstract';\nimport {\n  defaultCollisionDetection,\n  type CollisionDetector,\n} from '@dnd-kit/collision';\nimport {Draggable, Droppable} from '@dnd-kit/dom';\nimport type {\n  DraggableInput,\n  FeedbackType,\n  DroppableInput,\n  Sensors,\n  DragDropManager,\n} from '@dnd-kit/dom';\nimport {animateTransform, scheduler} from '@dnd-kit/dom/utilities';\nimport {Shape} from '@dnd-kit/geometry';\n\nimport {SortableKeyboardPlugin} from './SortableKeyboardPlugin.js';\nimport {OptimisticSortingPlugin} from './OptimisticSortingPlugin.js';\n\nexport interface SortableTransition {\n  /**\n   * The duration of the transition in milliseconds.\n   * @default 300\n   */\n  duration?: number;\n  /**\n   * The easing function to use for the transition.\n   * @default 'cubic-bezier(0.25, 1, 0.5, 1)'\n   */\n  easing?: string;\n  /**\n   * Whether the sortable item should transition when its index changes,\n   * but there is no drag operation in progress.\n   * @default false\n   **/\n  idle?: boolean;\n}\n\nconst defaultPlugins: PluginConstructor[] = [\n  SortableKeyboardPlugin,\n  OptimisticSortingPlugin,\n];\n\nexport interface SortableInput<T extends Data>\n  extends Omit<DraggableInput<T>, 'effects'>,\n    Omit<DroppableInput<T>, 'effects'> {\n  /**\n   * The index of the sortable item within its group.\n   */\n  index: number;\n  /**\n   * The optional unique identifier of the group that the sortable item belongs to.\n   */\n  group?: UniqueIdentifier;\n  /**\n   * The transition configuration to use when the index of the sortable item changes.\n   */\n  transition?: SortableTransition | null;\n  /**\n   * Additional effects to set up when sortable item is instantiated.\n   */\n  effects?: (instance: Sortable<T>) => Effect[];\n  /**\n   * Plugins to register when sortable item is instantiated.\n   * @default [SortableKeyboardPlugin, OptimisticSortingPlugin]\n   */\n  plugins?: PluginConstructor[];\n}\n\nexport const defaultSortableTransition: SortableTransition = {\n  duration: 250,\n  easing: 'cubic-bezier(0.25, 1, 0.5, 1)',\n  idle: false,\n};\n\nexport class Sortable<T extends Data = Data> {\n  public draggable: Draggable<T>;\n  public droppable: Droppable<T>;\n\n  @reactive\n  index: number;\n\n  previousIndex: number;\n\n  initialIndex: number;\n\n  @reactive\n  group: UniqueIdentifier | undefined;\n\n  @reactive\n  element: Element | undefined;\n\n  @reactive\n  source: Element | undefined;\n\n  @reactive\n  target: Element | undefined;\n\n  transition: SortableTransition | null;\n\n  constructor(\n    {\n      effects: inputEffects,\n      group,\n      index,\n      sensors,\n      type,\n      transition = defaultSortableTransition,\n      plugins = defaultPlugins,\n      ...input\n    }: SortableInput<T>,\n    public manager: DragDropManager<any, any>\n  ) {\n    this.draggable = new SortableDraggable<T>(\n      {...input, type, sensors},\n      manager,\n      this\n    );\n    this.droppable = new SortableDroppable<T>(input, manager, this);\n\n    for (const plugin of plugins) {\n      manager.registry.register(plugin);\n    }\n\n    this.index = index;\n    this.previousIndex = index;\n    this.initialIndex = index;\n    this.group = group;\n    this.type = type;\n    this.transition = transition;\n\n    const {destroy} = this;\n\n    const unsubscribe = this.manager.monitor.addEventListener(\n      'dragstart',\n      () => {\n        this.initialIndex = this.index;\n        this.previousIndex = this.index;\n      }\n    );\n\n    const cleanup = effects(\n      () => {\n        const {index, previousIndex} = this;\n\n        // Re-run this effect whenever the index changes\n        if (index === previousIndex) {\n          return;\n        }\n\n        this.previousIndex = index;\n\n        this.animate();\n      },\n      () => {\n        const {target} = this;\n        const {feedback, isDragSource} = this.draggable;\n\n        if (feedback == 'move' && isDragSource) {\n          this.droppable.disabled = !target;\n        }\n      },\n      () => {\n        const {element} = this;\n\n        this.droppable.element = element;\n        this.draggable.element = element;\n      },\n      () => {\n        const {target} = this;\n        const element = untracked(() => this.element);\n\n        this.droppable.element = !target && element ? element : target;\n      },\n      () => {\n        const {source} = this;\n        const element = untracked(() => this.element);\n\n        this.draggable.element = !source && element ? element : source;\n      },\n      ...(inputEffects?.(this) ?? [])\n    );\n\n    this.destroy = () => {\n      destroy.bind(this)();\n      unsubscribe();\n      cleanup();\n    };\n  }\n\n  protected animate() {\n    untracked(() => {\n      const {manager, transition} = this;\n      const {shape} = this.droppable;\n      const {idle} = manager.dragOperation.status;\n\n      if (!shape || !transition || (idle && !transition.idle)) {\n        return;\n      }\n\n      scheduler.schedule(() => {\n        const {element} = this.droppable;\n\n        if (!element) {\n          return;\n        }\n\n        this.refreshShape();\n\n        const updatedShape = this.droppable.shape;\n\n        if (!updatedShape) {\n          return;\n        }\n\n        const delta = {\n          x: shape.boundingRectangle.left - updatedShape.boundingRectangle.left,\n          y: shape.boundingRectangle.top - updatedShape.boundingRectangle.top,\n        };\n\n        if (delta.x || delta.y) {\n          animateTransform({\n            element,\n            keyframes: {\n              translate: [`${delta.x}px ${delta.y}px 0`, '0px 0px 0'],\n            },\n            options: transition,\n            onFinish: () => {\n              if (idle) {\n                this.droppable.shape = undefined;\n              }\n            },\n          });\n        }\n      });\n    });\n  }\n\n  public get disabled() {\n    return this.draggable.disabled && this.droppable.disabled;\n  }\n\n  public set feedback(value: FeedbackType) {\n    this.draggable.feedback = value;\n  }\n\n  public set disabled(value: boolean) {\n    batch(() => {\n      this.draggable.disabled = value;\n      this.droppable.disabled = value;\n    });\n  }\n\n  public set data(data: T | null) {\n    batch(() => {\n      this.draggable.data = data;\n      this.droppable.data = data;\n    });\n  }\n\n  public set handle(handle: Element | undefined) {\n    this.draggable.handle = handle;\n  }\n\n  public set id(id: UniqueIdentifier) {\n    batch(() => {\n      this.draggable.id = id;\n      this.droppable.id = id;\n    });\n  }\n\n  public set sensors(value: Sensors | undefined) {\n    this.draggable.sensors = value;\n  }\n\n  public set collisionPriority(value: CollisionPriority | number | undefined) {\n    this.droppable.collisionPriority = value ?? CollisionPriority.Normal;\n  }\n\n  public set collisionDetector(value: CollisionDetector | undefined) {\n    this.droppable.collisionDetector = value ?? defaultCollisionDetection;\n  }\n\n  public set type(type: Type | undefined) {\n    this.draggable.type = type;\n    this.droppable.type = type;\n  }\n\n  public get type() {\n    return this.draggable.type;\n  }\n\n  public set accept(value: Droppable['accept']) {\n    this.droppable.accept = value;\n  }\n\n  public get accept() {\n    return this.droppable.accept;\n  }\n\n  public get isDropTarget() {\n    return this.droppable.isDropTarget;\n  }\n\n  /**\n   * A boolean indicating whether the sortable item is the source of a drag operation.\n   */\n  public get isDragSource() {\n    return this.draggable.isDragSource;\n  }\n\n  public refreshShape(ignoreTransforms = true) {\n    this.droppable.refreshShape(ignoreTransforms);\n  }\n\n  public accepts(draggable: Draggable): boolean {\n    return this.droppable.accepts(draggable);\n  }\n\n  public destroy() {\n    this.draggable.destroy();\n    this.droppable.destroy();\n  }\n}\n\nexport class SortableDraggable<T extends Data> extends Draggable<T> {\n  constructor(\n    input: DraggableInput<T>,\n    manager: DragDropManager,\n    public sortable: Sortable<T>\n  ) {\n    super(input, manager);\n  }\n\n  public get index() {\n    return this.sortable.index;\n  }\n}\n\nexport class SortableDroppable<T extends Data> extends Droppable<T> {\n  constructor(\n    input: DraggableInput<T>,\n    manager: DragDropManager,\n    public sortable: Sortable<T>\n  ) {\n    super(input, manager);\n  }\n\n  public refreshShape(ignoreTransforms = true): Shape | undefined {\n    return super.refreshShape(ignoreTransforms);\n  }\n\n  public get index() {\n    return this.sortable.index;\n  }\n}\n","import {effect} from '@dnd-kit/state';\nimport {Plugin} from '@dnd-kit/abstract';\nimport {closestCenter} from '@dnd-kit/collision';\nimport {\n  isKeyboardEvent,\n  scheduler,\n  scrollIntoViewIfNeeded,\n} from '@dnd-kit/dom/utilities';\nimport type {Coordinates} from '@dnd-kit/geometry';\n\nimport {Scroller} from '@dnd-kit/dom';\nimport type {DragDropManager, Droppable} from '@dnd-kit/dom';\n\nimport {isSortable} from './utilities.js';\n\nconst TOLERANCE = 10;\n\nexport class SortableKeyboardPlugin extends Plugin<DragDropManager> {\n  constructor(manager: DragDropManager) {\n    super(manager);\n\n    const cleanupEffect = effect(() => {\n      const {dragOperation} = manager;\n\n      if (!isKeyboardEvent(dragOperation.activatorEvent)) {\n        return;\n      }\n\n      if (!isSortable(dragOperation.source)) {\n        return;\n      }\n\n      if (dragOperation.status.initialized) {\n        const scroller = manager.registry.plugins.get(Scroller);\n\n        if (scroller) {\n          scroller.disable();\n\n          return () => scroller.enable();\n        }\n      }\n    });\n\n    const unsubscribe = manager.monitor.addEventListener(\n      'dragmove',\n      (event, manager) => {\n        queueMicrotask(() => {\n          if (this.disabled || event.defaultPrevented) {\n            return;\n          }\n\n          const {dragOperation} = manager;\n\n          if (!isKeyboardEvent(dragOperation.activatorEvent)) {\n            return;\n          }\n\n          if (!isSortable(dragOperation.source)) {\n            return;\n          }\n\n          if (!dragOperation.shape) {\n            return;\n          }\n\n          const {actions, collisionObserver, registry} = manager;\n          const {by} = event;\n\n          if (!by) {\n            return;\n          }\n\n          const direction = getDirection(by);\n          const {source} = dragOperation;\n          const {center} = dragOperation.shape.current;\n          const potentialTargets: Droppable[] = [];\n\n          for (const droppable of registry.droppables) {\n            const {shape, id} = droppable;\n\n            if (\n              !shape ||\n              (id === source?.id && isSortable(droppable)) ||\n              (source?.type != null && !droppable.accepts(source))\n            ) {\n              continue;\n            }\n\n            switch (direction) {\n              case 'down':\n                if (center.y + TOLERANCE < shape.center.y) {\n                  potentialTargets.push(droppable);\n                }\n                break;\n              case 'up':\n                if (center.y - TOLERANCE > shape.center.y) {\n                  potentialTargets.push(droppable);\n                }\n                break;\n              case 'left':\n                if (center.x - TOLERANCE > shape.center.x) {\n                  potentialTargets.push(droppable);\n                }\n                break;\n              case 'right':\n                if (center.x + TOLERANCE < shape.center.x) {\n                  potentialTargets.push(droppable);\n                }\n                break;\n            }\n          }\n\n          event.preventDefault();\n          collisionObserver.disable();\n\n          const collisions = collisionObserver.computeCollisions(\n            potentialTargets,\n            closestCenter\n          );\n          const [firstCollision] = collisions;\n\n          if (!firstCollision) {\n            return;\n          }\n\n          const {id} = firstCollision;\n\n          actions.setDropTarget(id).then(() => {\n            const {source} = dragOperation;\n\n            if (!source) {\n              return;\n            }\n\n            const droppable = registry.droppables.get(source.id);\n\n            if (!droppable?.element) {\n              return;\n            }\n\n            const {element} = droppable;\n            scrollIntoViewIfNeeded(element);\n\n            scheduler.schedule(() => {\n              const shape = droppable.refreshShape();\n\n              if (!shape) {\n                return;\n              }\n\n              actions.move({\n                to: {\n                  x: shape.center.x,\n                  y: shape.center.y,\n                },\n              });\n\n              actions.setDropTarget(source.id).then(() => {\n                dragOperation.shape = shape;\n                collisionObserver.enable();\n              });\n            });\n          });\n        });\n      }\n    );\n\n    this.destroy = () => {\n      unsubscribe();\n      cleanupEffect();\n    };\n  }\n}\n\nfunction getDirection(delta: Coordinates) {\n  const {x, y} = delta;\n\n  if (x > 0) {\n    return 'right';\n  } else if (x < 0) {\n    return 'left';\n  } else if (y > 0) {\n    return 'down';\n  } else if (y < 0) {\n    return 'up';\n  }\n}\n","import type {Droppable, Draggable} from '@dnd-kit/dom';\n\nimport {SortableDroppable, SortableDraggable} from './sortable.js';\n\nexport function isSortable(\n  element: Draggable | Droppable | null\n): element is SortableDroppable<any> | SortableDraggable<any> {\n  return (\n    element instanceof SortableDroppable || element instanceof SortableDraggable\n  );\n}\n","import {Plugin, UniqueIdentifier} from '@dnd-kit/abstract';\nimport type {DragDropManager} from '@dnd-kit/dom';\nimport {arrayMove} from '@dnd-kit/helpers';\n\nimport {isSortable} from './utilities.js';\nimport {Sortable, SortableDroppable} from './sortable.js';\nimport {batch} from '@dnd-kit/state';\n\nexport class OptimisticSortingPlugin extends Plugin<DragDropManager> {\n  constructor(manager: DragDropManager) {\n    super(manager);\n\n    const getSortableInstances = (group: UniqueIdentifier | undefined) => {\n      const sortableInstances = new Map<number, Sortable>();\n\n      for (const droppable of manager.registry.droppables) {\n        if (droppable instanceof SortableDroppable) {\n          const {sortable} = droppable;\n\n          if (sortable.group !== group) {\n            continue;\n          }\n\n          if (sortableInstances.has(sortable.index)) {\n            throw new Error(\n              'Duplicate sortable index found for same sortable group. Make sure each sortable item has a unique index. Use the `group` attribute to separate sortables into different groups.'\n            );\n          }\n\n          sortableInstances.set(sortable.index, sortable);\n        }\n      }\n\n      return sortableInstances;\n    };\n\n    const unsubscribe = [\n      manager.monitor.addEventListener('dragover', (event, manager) => {\n        queueMicrotask(() => {\n          if (this.disabled || event.defaultPrevented) {\n            return;\n          }\n\n          const {dragOperation} = manager;\n          const {source, target} = dragOperation;\n\n          if (!isSortable(source) || !isSortable(target)) {\n            return;\n          }\n\n          if (source.sortable === target.sortable) {\n            return;\n          }\n\n          if (source.sortable.group !== target.sortable.group) {\n            return;\n          }\n\n          const sortableInstances = getSortableInstances(source.sortable.group);\n\n          // Wait for the renderer to handle the event before attempting to optimistically update\n          manager.renderer.rendering.then(() => {\n            for (const [index, sortable] of sortableInstances.entries()) {\n              if (sortable.index !== index) {\n                // At least one index was changed so we should abort optimistic updates\n                return;\n              }\n            }\n\n            const orderedSortables = Array.from(\n              sortableInstances.values()\n            ).sort((a, b) => a.index - b.index);\n            const newOrder = arrayMove(\n              orderedSortables,\n              source.sortable.index,\n              target.sortable.index\n            );\n\n            const sourceElement = source.sortable.droppable.element;\n            const targetElement = target.element;\n\n            if (!targetElement || !sourceElement) {\n              return;\n            }\n\n            reorder(\n              sourceElement,\n              source.sortable.index,\n              targetElement,\n              target.sortable.index\n            );\n\n            const position =\n              target.sortable.index < source.sortable.index\n                ? 'beforebegin'\n                : 'afterend';\n\n            targetElement.insertAdjacentElement(position, sourceElement);\n\n            batch(() => {\n              for (const [index, sortable] of newOrder.entries()) {\n                sortable.index = index;\n              }\n            });\n          });\n        });\n      }),\n      manager.monitor.addEventListener('dragend', (event, manager) => {\n        if (!event.canceled) {\n          return;\n        }\n\n        const {dragOperation} = manager;\n        const {source} = dragOperation;\n\n        if (!isSortable(source)) {\n          return;\n        }\n\n        if (source.sortable.initialIndex === source.sortable.index) {\n          return;\n        }\n\n        queueMicrotask(() => {\n          const sortableInstances = getSortableInstances(source.sortable.group);\n\n          // Wait for the renderer to handle the event before attempting to optimistically update\n          manager.renderer.rendering.then(() => {\n            for (const [index, sortable] of sortableInstances.entries()) {\n              if (sortable.index !== index) {\n                // At least one index was changed so we should abort optimistic updates\n                return;\n              }\n            }\n\n            const orderedSortables = Array.from(\n              sortableInstances.values()\n            ).sort((a, b) => a.index - b.index);\n\n            const sourceElement = source.sortable.droppable.element;\n            const targetElement =\n              orderedSortables[source.sortable.initialIndex].element;\n\n            if (!targetElement || !sourceElement) {\n              return;\n            }\n\n            reorder(\n              sourceElement,\n              source.sortable.index,\n              targetElement,\n              source.sortable.initialIndex\n            );\n\n            batch(() => {\n              for (const sortable of orderedSortables.values()) {\n                sortable.index = sortable.initialIndex;\n              }\n            });\n          });\n        });\n      }),\n    ];\n\n    this.destroy = () => {\n      for (const unsubscribeListener of unsubscribe) {\n        unsubscribeListener();\n      }\n    };\n  }\n}\n\nfunction reorder(\n  sourceElement: Element,\n  sourceIndex: number,\n  targetElement: Element,\n  targetIndex: number\n) {\n  const position = targetIndex < sourceIndex ? 'beforebegin' : 'afterend';\n\n  targetElement.insertAdjacentElement(position, sourceElement);\n}\n","var __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\n\n// src/move.ts\nfunction arrayMove(array, from, to) {\n  if (from === to) {\n    return array;\n  }\n  const newArray = array.slice();\n  newArray.splice(to, 0, newArray.splice(from, 1)[0]);\n  return newArray;\n}\nfunction arraySwap(array, from, to) {\n  if (from === to) {\n    return array;\n  }\n  const newArray = array.slice();\n  const item = newArray[from];\n  newArray[from] = newArray[to];\n  newArray[to] = item;\n  return newArray;\n}\nfunction mutate(items, source, target, mutation) {\n  if (!source || !target) {\n    return items;\n  }\n  const findIndex = (item, id) => item === id || typeof item === \"object\" && \"id\" in item && item.id === id;\n  if (Array.isArray(items)) {\n    const sourceIndex2 = items.findIndex((item) => findIndex(item, source.id));\n    const targetIndex2 = items.findIndex((item) => findIndex(item, target.id));\n    if (sourceIndex2 === -1 || targetIndex2 === -1) {\n      return items;\n    }\n    const { dragOperation: dragOperation2 } = source.manager;\n    if (!dragOperation2.canceled && \"index\" in source && typeof source.index === \"number\") {\n      const projectedSourceIndex = source.index;\n      if (projectedSourceIndex !== sourceIndex2) {\n        return mutation(items, sourceIndex2, projectedSourceIndex);\n      }\n    }\n    return mutation(items, sourceIndex2, targetIndex2);\n  }\n  if (source.id === target.id) {\n    return items;\n  }\n  const entries = Object.entries(items);\n  let sourceIndex = -1;\n  let sourceParent;\n  let targetIndex = -1;\n  let targetParent;\n  for (const [id, children] of entries) {\n    if (sourceIndex === -1) {\n      sourceIndex = children.findIndex((item) => findIndex(item, source.id));\n      if (sourceIndex !== -1) {\n        sourceParent = id;\n      }\n    }\n    if (targetIndex === -1) {\n      targetIndex = children.findIndex((item) => findIndex(item, target.id));\n      if (targetIndex !== -1) {\n        targetParent = id;\n      }\n    }\n    if (sourceIndex !== -1 && targetIndex !== -1) {\n      break;\n    }\n  }\n  const { dragOperation } = source.manager;\n  const position = dragOperation.position.current;\n  if (targetParent == null) {\n    if (target.id in items) {\n      const insertionIndex = target.shape && position.y > target.shape.center.y ? items[target.id].length : 0;\n      targetParent = target.id;\n      targetIndex = insertionIndex;\n    }\n  }\n  if (sourceParent == null || targetParent == null) {\n    return items;\n  }\n  if (sourceParent === targetParent) {\n    return __spreadProps(__spreadValues({}, items), {\n      [sourceParent]: mutation(items[sourceParent], sourceIndex, targetIndex)\n    });\n  }\n  const isBelowTarget = target.shape && position.y > target.shape.boundingRectangle.bottom;\n  const modifier = isBelowTarget ? 1 : 0;\n  const sourceItem = items[sourceParent][sourceIndex];\n  return __spreadProps(__spreadValues({}, items), {\n    [sourceParent]: [\n      ...items[sourceParent].slice(0, sourceIndex),\n      ...items[sourceParent].slice(sourceIndex + 1)\n    ],\n    [targetParent]: [\n      ...items[targetParent].slice(0, targetIndex + modifier),\n      sourceItem,\n      ...items[targetParent].slice(targetIndex + modifier)\n    ]\n  });\n}\nfunction move(items, source, target) {\n  return mutate(items, source, target, arrayMove);\n}\nfunction swap(items, source, target) {\n  return mutate(items, source, target, arraySwap);\n}\nexport {\n  arrayMove,\n  arraySwap,\n  move,\n  swap\n};\n"]}

package/sortable.d.cts

@@ -0,0 +1,85 @@
+import { Effect } from '@dnd-kit/state';
+import { Data, UniqueIdentifier, PluginConstructor, CollisionPriority, Type } from '@dnd-kit/abstract';
+import { CollisionDetector } from '@dnd-kit/collision';
+import { DraggableInput, DroppableInput, DragDropManager, Draggable, Droppable, FeedbackType, Sensors } from '@dnd-kit/dom';
+
+interface SortableTransition {
+    /**
+     * The duration of the transition in milliseconds.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * The easing function to use for the transition.
+     * @default 'cubic-bezier(0.25, 1, 0.5, 1)'
+     */
+    easing?: string;
+    /**
+     * Whether the sortable item should transition when its index changes,
+     * but there is no drag operation in progress.
+     * @default false
+     **/
+    idle?: boolean;
+}
+interface SortableInput<T extends Data> extends Omit<DraggableInput<T>, 'effects'>, Omit<DroppableInput<T>, 'effects'> {
+    /**
+     * The index of the sortable item within its group.
+     */
+    index: number;
+    /**
+     * The optional unique identifier of the group that the sortable item belongs to.
+     */
+    group?: UniqueIdentifier;
+    /**
+     * The transition configuration to use when the index of the sortable item changes.
+     */
+    transition?: SortableTransition | null;
+    /**
+     * Additional effects to set up when sortable item is instantiated.
+     */
+    effects?: (instance: Sortable<T>) => Effect[];
+    /**
+     * Plugins to register when sortable item is instantiated.
+     * @default [SortableKeyboardPlugin, OptimisticSortingPlugin]
+     */
+    plugins?: PluginConstructor[];
+}
+declare const defaultSortableTransition: SortableTransition;
+declare class Sortable<T extends Data = Data> {
+    manager: DragDropManager<any, any>;
+    draggable: Draggable<T>;
+    droppable: Droppable<T>;
+    index: number;
+    previousIndex: number;
+    initialIndex: number;
+    group: UniqueIdentifier | undefined;
+    element: Element | undefined;
+    source: Element | undefined;
+    target: Element | undefined;
+    transition: SortableTransition | null;
+    constructor({ effects: inputEffects, group, index, sensors, type, transition, plugins, ...input }: SortableInput<T>, manager: DragDropManager<any, any>);
+    protected animate(): void;
+    get disabled(): boolean;
+    set feedback(value: FeedbackType);
+    set disabled(value: boolean);
+    set data(data: T | null);
+    set handle(handle: Element | undefined);
+    set id(id: UniqueIdentifier);
+    set sensors(value: Sensors | undefined);
+    set collisionPriority(value: CollisionPriority | number | undefined);
+    set collisionDetector(value: CollisionDetector | undefined);
+    set type(type: Type | undefined);
+    get type(): Type | undefined;
+    set accept(value: Droppable['accept']);
+    get accept(): Droppable['accept'];
+    get isDropTarget(): boolean;
+    /**
+     * A boolean indicating whether the sortable item is the source of a drag operation.
+     */
+    get isDragSource(): boolean;
+    refreshShape(ignoreTransforms?: boolean): void;
+    accepts(draggable: Draggable): boolean;
+    destroy(): void;
+}
+
+export { Sortable, type SortableInput, type SortableTransition, defaultSortableTransition };