@eightshift/ui-components 6.0.8 → 6.0.10

package/dist/components/draggable/draggable.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, startTransition, createContext, memo, forwardRef, useImperativeHandle, useContext, useId } from "react";
+import { useEffect, useRef, useLayoutEffect, useMemo, useState, useCallback, createContext, memo, useInsertionEffect, forwardRef, startTransition, useImperativeHandle, useContext } from "react";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { DraggableContext } from "./draggable-context.js";
-import { r as reactDomExports } from "../../index-oFgxU4zs.js";
+import { r as reactDomExports } from "../../index-sSixe2j_.js";
 import { randomId } from "../../utilities/hash.js";
-var i = Symbol.for("preact-signals");
+var i = /* @__PURE__ */ Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {
     var i2, t2 = false;
@@ -378,7 +378,7 @@ var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
 var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
 var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
@@ -532,7 +532,7 @@ function enumerable(enumerable2 = true) {
   };
 }
 function effects(...entries) {
-  const effects2 = entries.map(E);
+  const effects2 = entries.map((fn) => E(fn));
   return () => effects2.forEach((cleanup) => cleanup());
 }
 var _previous_dec, _initial_dec, _current_dec$1, _current_dec2, _previous_dec2, _initial_dec2, _init$5, _initial, _a$3, initial_get, initial_set, _ValueHistory_instances, _previous, _b$1, previous_get, previous_set, _current, _c$2, current_get, current_set;
@@ -629,7 +629,7 @@ var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
 var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
 var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
@@ -920,7 +920,7 @@ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
@@ -2018,6 +2018,56 @@ var Sensor = class extends Plugin {
     this.options = options2;
   }
 };
+var ActivationController = class extends AbortController {
+  constructor(constraints, onActivate) {
+    super();
+    this.constraints = constraints;
+    this.onActivate = onActivate;
+    this.activated = false;
+    for (const constraint of constraints != null ? constraints : []) {
+      constraint.controller = this;
+    }
+  }
+  onEvent(event) {
+    var _a4;
+    if (this.activated) return;
+    if ((_a4 = this.constraints) == null ? void 0 : _a4.length) {
+      for (const constraint of this.constraints) {
+        constraint.onEvent(event);
+      }
+    } else {
+      this.activate(event);
+    }
+  }
+  activate(event) {
+    if (this.activated) return;
+    this.activated = true;
+    this.onActivate(event);
+  }
+  abort(event) {
+    this.activated = false;
+    super.abort(event);
+  }
+};
+var _controller;
+var ActivationConstraint = class {
+  constructor(options2) {
+    this.options = options2;
+    __privateAdd$4(this, _controller);
+  }
+  set controller(controller) {
+    __privateSet$4(this, _controller, controller);
+    controller.signal.addEventListener("abort", () => this.abort());
+  }
+  /**
+   * Called when the activation is triggered.
+   */
+  activate(event) {
+    var _a4;
+    (_a4 = __privateGet$4(this, _controller)) == null ? void 0 : _a4.activate(event);
+  }
+};
+_controller = /* @__PURE__ */ new WeakMap();
 var Modifier = class extends Plugin {
   /**
    * Creates a new modifier instance.
@@ -2461,7 +2511,6 @@ function getBoundingRectangle(element) {
   const { width, height, top, left, bottom, right } = element.getBoundingClientRect();
   return { width, height, top, left, bottom, right };
 }
-var canUseDOM$1 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 function isWindow(element) {
   const elementString = Object.prototype.toString.call(element);
   return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
@@ -2590,6 +2639,40 @@ function getVisibleBoundingRectangle(element, boundingClientRect = element.getBo
   }
   return rect;
 }
+function getEventCoordinates(event) {
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+var canUseDOM$1 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function getDocuments(rootDoc = document, seen = /* @__PURE__ */ new Set()) {
+  if (seen.has(rootDoc)) return [];
+  seen.add(rootDoc);
+  const docs = [rootDoc];
+  for (const frame of Array.from(
+    rootDoc.querySelectorAll("iframe, frame")
+  )) {
+    try {
+      const childDoc = frame.contentDocument;
+      if (childDoc && !seen.has(childDoc)) {
+        docs.push(...getDocuments(childDoc, seen));
+      }
+    } catch (e2) {
+    }
+  }
+  try {
+    const win = rootDoc.defaultView;
+    if (win && win !== window.top) {
+      const parentWin = win.parent;
+      if (parentWin && parentWin.document && parentWin.document !== rootDoc) {
+        docs.push(...getDocuments(parentWin.document, seen));
+      }
+    }
+  } catch (e2) {
+  }
+  return docs;
+}
 function isSafari() {
   return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
@@ -2639,6 +2722,18 @@ function isIFrameElement(element) {
   return (element == null ? void 0 : element.tagName) === "IFRAME";
 }
 var ProxiedElements = /* @__PURE__ */ new WeakMap();
+function isInteractiveElement(element) {
+  return Boolean(
+    element.closest(`
+      input:not([disabled]),
+      select:not([disabled]),
+      textarea:not([disabled]),
+      button:not([disabled]),
+      a[href],
+      [contenteditable]:not([contenteditable="false"])
+    `)
+  );
+}
 var Listeners = class {
   constructor() {
     this.entries = /* @__PURE__ */ new Set();
@@ -2651,14 +2746,17 @@ var Listeners = class {
     };
   }
   bind(target, input) {
+    const eventTargets = Array.isArray(target) ? target : [target];
     const listeners = Array.isArray(input) ? input : [input];
     const entries = [];
-    for (const descriptor2 of listeners) {
-      const { type, listener, options: options2 } = descriptor2;
-      const entry = [target, descriptor2];
-      target.addEventListener(type, listener, options2);
-      this.entries.add(entry);
-      entries.push(entry);
+    for (const target2 of eventTargets) {
+      for (const descriptor2 of listeners) {
+        const { type, listener, options: options2 } = descriptor2;
+        const entry = [target2, descriptor2];
+        target2.addEventListener(type, listener, options2);
+        this.entries.add(entry);
+        entries.push(entry);
+      }
     }
     return function cleanup() {
       for (const [target2, { type, listener, options: options2 }] of entries) {
@@ -3664,7 +3762,7 @@ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
 var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
 var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
@@ -4979,9 +5077,8 @@ var defaults = Object.freeze({
     left: ["ArrowLeft"],
     right: ["ArrowRight"]
   },
-  shouldActivate(args) {
+  preventActivation(event, source) {
     var _a4;
-    const { event, source } = args;
     const target = (_a4 = source.handle) != null ? _a4 : source.element;
     return event.target === target;
   }
@@ -5006,7 +5103,7 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
       }
       const {
         keyboardCodes = defaults.keyboardCodes,
-        shouldActivate = defaults.shouldActivate
+        preventActivation = defaults.preventActivation
       } = options3 != null ? options3 : {};
       if (!keyboardCodes.start.includes(event.code)) {
         return;
@@ -5014,9 +5111,8 @@ var _KeyboardSensor = class _KeyboardSensor2 extends Sensor {
       if (!this.manager.dragOperation.status.idle) {
         return;
       }
-      if (shouldActivate({ event, source, manager: this.manager })) {
-        this.handleStart(event, source, options3);
-      }
+      if (preventActivation == null ? void 0 : preventActivation(event, source)) return;
+      this.handleStart(event, source, options3);
     };
   }
   bind(source, options2 = this.options) {
@@ -5156,6 +5252,89 @@ var KeyboardSensor = _KeyboardSensor;
 function isKeycode(event, codes) {
   return codes.includes(event.code);
 }
+var _coordinates;
+var DistanceConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _coordinates);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet$2(this, _coordinates, getEventCoordinates(event));
+        break;
+      case "pointermove":
+        if (!__privateGet$2(this, _coordinates)) return;
+        const { x, y: y2 } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet$2(this, _coordinates).x,
+          y: y2 - __privateGet$2(this, _coordinates).y
+        };
+        const { tolerance } = this.options;
+        if (tolerance && exceedsDistance(delta, tolerance)) {
+          this.abort();
+          return;
+        }
+        if (exceedsDistance(delta, this.options.value)) {
+          this.activate(event);
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    __privateSet$2(this, _coordinates, void 0);
+  }
+};
+_coordinates = /* @__PURE__ */ new WeakMap();
+var _timeout2, _coordinates2;
+var DelayConstraint = class extends ActivationConstraint {
+  constructor() {
+    super(...arguments);
+    __privateAdd$2(this, _timeout2);
+    __privateAdd$2(this, _coordinates2);
+  }
+  onEvent(event) {
+    switch (event.type) {
+      case "pointerdown":
+        __privateSet$2(this, _coordinates2, getEventCoordinates(event));
+        __privateSet$2(this, _timeout2, setTimeout(
+          () => this.activate(event),
+          this.options.value
+        ));
+        break;
+      case "pointermove":
+        if (!__privateGet$2(this, _coordinates2)) return;
+        const { x, y: y2 } = getEventCoordinates(event);
+        const delta = {
+          x: x - __privateGet$2(this, _coordinates2).x,
+          y: y2 - __privateGet$2(this, _coordinates2).y
+        };
+        if (exceedsDistance(delta, this.options.tolerance)) {
+          this.abort();
+        }
+        break;
+      case "pointerup":
+        this.abort();
+        break;
+    }
+  }
+  abort() {
+    if (__privateGet$2(this, _timeout2)) {
+      clearTimeout(__privateGet$2(this, _timeout2));
+      __privateSet$2(this, _coordinates2, void 0);
+      __privateSet$2(this, _timeout2, void 0);
+    }
+  }
+};
+_timeout2 = /* @__PURE__ */ new WeakMap();
+_coordinates2 = /* @__PURE__ */ new WeakMap();
+var PointerActivationConstraints = class {
+};
+PointerActivationConstraints.Delay = DelayConstraint;
+PointerActivationConstraints.Distance = DistanceConstraint;
 var defaults2 = Object.freeze({
   activationConstraints(event, source) {
     var _a4;
@@ -5164,29 +5343,37 @@ var defaults2 = Object.freeze({
       return void 0;
     }
     if (pointerType === "touch") {
-      return {
-        delay: { value: 250, tolerance: 5 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 })
+      ];
     }
     if (isTextInput(target) && !event.defaultPrevented) {
-      return {
-        delay: { value: 200, tolerance: 0 }
-      };
+      return [
+        new PointerActivationConstraints.Delay({ value: 200, tolerance: 0 })
+      ];
     }
-    return {
-      delay: { value: 200, tolerance: 10 },
-      distance: { value: 5 }
-    };
+    return [
+      new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+      new PointerActivationConstraints.Distance({ value: 5 })
+    ];
+  },
+  preventActivation(event, source) {
+    var _a4;
+    const { target } = event;
+    if (target === source.element) return false;
+    if (target === source.handle) return false;
+    if (!isElement(target)) return false;
+    if ((_a4 = source.handle) == null ? void 0 : _a4.contains(target)) return false;
+    return isInteractiveElement(target);
   }
 });
-var _cleanup, _clearTimeout;
+var _cleanup;
 var _PointerSensor = class _PointerSensor2 extends Sensor {
   constructor(manager, options2) {
     super(manager);
     this.manager = manager;
     this.options = options2;
     __privateAdd$2(this, _cleanup, /* @__PURE__ */ new Set());
-    __privateAdd$2(this, _clearTimeout);
     this.listeners = new Listeners();
     this.latest = {
       event: void 0,
@@ -5236,36 +5423,33 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     });
     return unbind;
   }
-  handlePointerDown(event, source, options2 = {}) {
+  handlePointerDown(event, source, options2) {
     if (this.disabled || !event.isPrimary || event.button !== 0 || !isElement(event.target) || source.disabled || isCapturedBySensor(event) || !this.manager.dragOperation.status.idle) {
       return;
     }
+    const { preventActivation = defaults2.preventActivation } = options2 != null ? options2 : {};
+    if (preventActivation == null ? void 0 : preventActivation(event, source)) {
+      return;
+    }
     const { target } = event;
     const isNativeDraggable = isHTMLElement(target) && target.draggable && target.getAttribute("draggable") === "true";
     const offset = getFrameTransform(source.element);
+    const { x, y: y2 } = getEventCoordinates(event);
     this.initialCoordinates = {
-      x: event.clientX * offset.scaleX + offset.x,
-      y: event.clientY * offset.scaleY + offset.y
+      x: x * offset.scaleX + offset.x,
+      y: y2 * offset.scaleY + offset.y
     };
     const constraints = this.activationConstraints(event, source);
     event.sensor = this;
-    if (!(constraints == null ? void 0 : constraints.delay) && !(constraints == null ? void 0 : constraints.distance)) {
-      this.handleStart(source, event);
-    } else {
-      const { delay } = constraints;
-      if (delay) {
-        const timeout2 = setTimeout(
-          () => this.handleStart(source, event),
-          delay.value
-        );
-        __privateSet$2(this, _clearTimeout, () => {
-          clearTimeout(timeout2);
-          __privateSet$2(this, _clearTimeout, void 0);
-        });
-      }
-    }
-    const ownerDocument = getDocument(event.target);
-    const unbindListeners = this.listeners.bind(ownerDocument, [
+    const controller = new ActivationController(
+      constraints,
+      (event2) => this.handleStart(source, event2)
+    );
+    controller.signal.onabort = () => this.handleCancel(event);
+    controller.onEvent(event);
+    this.controller = controller;
+    const documents = getDocuments();
+    const unbindListeners = this.listeners.bind(documents, [
       {
         type: "pointermove",
         listener: (event2) => this.handlePointerMove(event2, source)
@@ -5287,50 +5471,27 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       }
     ]);
     const cleanup = () => {
-      var _a4;
       unbindListeners();
-      (_a4 = __privateGet$2(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
       this.initialCoordinates = void 0;
     };
     __privateGet$2(this, _cleanup).add(cleanup);
   }
   handlePointerMove(event, source) {
-    const coordinates = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const offset = getFrameTransform(source.element);
-    coordinates.x = coordinates.x * offset.scaleX + offset.x;
-    coordinates.y = coordinates.y * offset.scaleY + offset.y;
+    var _a4, _b2;
+    if (((_a4 = this.controller) == null ? void 0 : _a4.activated) === false) {
+      (_b2 = this.controller) == null ? void 0 : _b2.onEvent(event);
+      return;
+    }
     if (this.manager.dragOperation.status.dragging) {
+      const coordinates = getEventCoordinates(event);
+      const offset = getFrameTransform(source.element);
+      coordinates.x = coordinates.x * offset.scaleX + offset.x;
+      coordinates.y = coordinates.y * offset.scaleY + offset.y;
       event.preventDefault();
       event.stopPropagation();
       this.latest.event = event;
       this.latest.coordinates = coordinates;
       scheduler.schedule(this.handleMove);
-      return;
-    }
-    if (!this.initialCoordinates) {
-      return;
-    }
-    const delta = {
-      x: coordinates.x - this.initialCoordinates.x,
-      y: coordinates.y - this.initialCoordinates.y
-    };
-    const constraints = this.activationConstraints(event, source);
-    const { distance, delay } = constraints != null ? constraints : {};
-    if (distance) {
-      if (distance.tolerance != null && exceedsDistance(delta, distance.tolerance)) {
-        return this.handleCancel(event);
-      }
-      if (exceedsDistance(delta, distance.value)) {
-        return this.handleStart(source, event);
-      }
-    }
-    if (delay) {
-      if (exceedsDistance(delta, delay.tolerance)) {
-        return this.handleCancel(event);
-      }
     }
   }
   handlePointerUp(event) {
@@ -5350,9 +5511,7 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     }
   }
   handleStart(source, event) {
-    var _a4;
     const { manager, initialCoordinates } = this;
-    (_a4 = __privateGet$2(this, _clearTimeout)) == null ? void 0 : _a4.call(this);
     if (!initialCoordinates || !manager.dragOperation.status.idle) {
       return;
     }
@@ -5369,7 +5528,8 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
     const ownerDocument = getDocument(event.target);
     const pointerCaptureTarget = ownerDocument.body;
     pointerCaptureTarget.setPointerCapture(event.pointerId);
-    const unbind = this.listeners.bind(ownerDocument, [
+    const listenerTargets = isElement(event.target) ? [event.target, ownerDocument.body] : ownerDocument.body;
+    const unbind = this.listeners.bind(listenerTargets, [
       {
         // Prevent scrolling on touch devices
         type: "touchmove",
@@ -5390,13 +5550,6 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
       {
         type: "keydown",
         listener: this.handleKeyDown
-      },
-      {
-        type: "lostpointercapture",
-        listener: (event2) => {
-          if (event2.target !== pointerCaptureTarget) return;
-          this.handlePointerUp(event2);
-        }
       }
     ]);
     __privateGet$2(this, _cleanup).add(unbind);
@@ -5422,7 +5575,6 @@ var _PointerSensor = class _PointerSensor2 extends Sensor {
   }
 };
 _cleanup = /* @__PURE__ */ new WeakMap();
-_clearTimeout = /* @__PURE__ */ new WeakMap();
 _PointerSensor.configure = configurator(_PointerSensor);
 _PointerSensor.defaults = defaults2;
 var PointerSensor = _PointerSensor;
@@ -5608,7 +5760,7 @@ var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
 var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
 var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError$1 = (msg) => {
   throw TypeError(msg);
 };
@@ -6566,9 +6718,7 @@ function DragDropProvider(_a22) {
     "onDragOver",
     "onDragEnd"
   ]);
-  var _a32;
   const rendererRef = useRef(null);
-  const [manager, setManager] = useState((_a32 = input.manager) != null ? _a32 : null);
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = useLatest(onBeforeDragStart);
   const handleDragStart = useLatest(onDragStart);
@@ -6576,53 +6726,57 @@ function DragDropProvider(_a22) {
   const handleDragMove = useLatest(onDragMove);
   const handleDragEnd = useLatest(onDragEnd);
   const handleCollision = useLatest(onCollision);
+  const manager = useStableInstance(() => {
+    var _a32;
+    return (_a32 = input.manager) != null ? _a32 : new DragDropManager2(input);
+  });
   useEffect(() => {
-    var _a4;
     if (!rendererRef.current) throw new Error("Renderer not found");
     const { renderer, trackRendering } = rendererRef.current;
-    const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager2(input);
-    manager2.renderer = renderer;
-    manager2.monitor.addEventListener("beforedragstart", (event) => {
-      const callback = handleBeforeDragStart.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener(
-      "dragstart",
-      (event) => {
-        var _a5;
-        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
-      }
-    );
-    manager2.monitor.addEventListener("dragover", (event) => {
-      const callback = handleDragOver.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener("dragmove", (event) => {
-      const callback = handleDragMove.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener("dragend", (event) => {
-      const callback = handleDragEnd.current;
-      if (callback) {
-        trackRendering(() => callback(event, manager2));
-      }
-    });
-    manager2.monitor.addEventListener(
-      "collision",
-      (event) => {
-        var _a5;
-        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
-      }
-    );
-    startTransition(() => setManager(manager2));
-    return manager2.destroy;
-  }, [input.manager]);
+    const { monitor } = manager;
+    manager.renderer = renderer;
+    const listeners = [
+      monitor.addEventListener("beforedragstart", (event) => {
+        const callback = handleBeforeDragStart.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener(
+        "dragstart",
+        (event) => {
+          var _a32;
+          return (_a32 = handleDragStart.current) == null ? void 0 : _a32.call(handleDragStart, event, manager);
+        }
+      ),
+      monitor.addEventListener("dragover", (event) => {
+        const callback = handleDragOver.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener("dragmove", (event) => {
+        const callback = handleDragMove.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener("dragend", (event) => {
+        const callback = handleDragEnd.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager));
+        }
+      }),
+      monitor.addEventListener(
+        "collision",
+        (event) => {
+          var _a32;
+          return (_a32 = handleCollision.current) == null ? void 0 : _a32.call(handleCollision, event, manager);
+        }
+      )
+    ];
+    return () => listeners.forEach((dispose) => dispose());
+  }, [manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -6643,6 +6797,19 @@ function DragDropProvider(_a22) {
     children
   ] });
 }
+function useStableInstance(create) {
+  const ref = useRef(null);
+  if (!ref.current) {
+    ref.current = create();
+  }
+  useInsertionEffect(() => {
+    return () => {
+      var _a22;
+      return (_a22 = ref.current) == null ? void 0 : _a22.destroy();
+    };
+  }, []);
+  return ref.current;
+}
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
@@ -6659,7 +6826,7 @@ function useInstance(initializer) {
 var __create = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
@@ -7223,6 +7390,7 @@ function mutate(items, event, mutation) {
 function move(items, event) {
   return mutate(items, event, arrayMove);
 }
+const removeIds = (arr) => arr.map(({ id, ...item }) => item);
 const SortableItem = ({ id, index, disabled, children, axis }) => {
   const [element, setElement] = useState(null);
   const handleRef = useRef(null);
@@ -7282,7 +7450,6 @@ const SortableItem = ({ id, index, disabled, children, axis }) => {
  * @preserve
  */
 const Draggable3 = (props) => {
-  useId("draggable-list-item-");
   const {
     children,
     items: rawItems,
@@ -7297,9 +7464,12 @@ const Draggable3 = (props) => {
   if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
     console.warn(__("Draggable: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
-  const [items, setItems] = useState(rawItems);
+  const [items, setItems] = useState(rawItems.map((item) => ({ ...item, id: item?.id || randomId(6) })));
   useEffect(() => {
-    setItems(rawItems);
+    if (JSON.stringify(rawItems) === JSON.stringify(removeIds(items))) {
+      return;
+    }
+    setItems(rawItems.map((item) => ({ ...item, id: randomId(6) })));
   }, [rawItems]);
   if (hidden) {
     return null;
@@ -7312,18 +7482,20 @@ const Draggable3 = (props) => {
       children: /* @__PURE__ */ jsx(
         DragDropProvider,
         {
-          onDragOver: (event) => setItems((items2) => move(items2, event)),
           onDragEnd: (event) => {
             if (event?.canceled) {
               return;
             }
-            setItems((items2) => move(items2, event));
-            onChange(items);
+            setItems((items2) => {
+              const newItems = move(items2, event);
+              onChange(removeIds(newItems));
+              return newItems;
+            });
           },
-          children: items.map((item, index) => /* @__PURE__ */ jsx(
+          children: items.map(({ id, ...item }, index) => /* @__PURE__ */ jsx(
             SortableItem,
             {
-              id: randomId(6),
+              id,
               index,
               item,
               disabled: noReorder,
@@ -7336,20 +7508,21 @@ const Draggable3 = (props) => {
                     ...updated[index],
                     ...newValue
                   };
-                  onChange(updated);
                   setItems(updated);
+                  onChange(removeIds(updated));
                 },
                 itemIndex: index,
                 deleteItem: () => {
                   setItems([...items].filter((_2, i2) => i2 !== index));
-                  onChange([...items].filter((_2, i2) => i2 !== index));
+                  onChange(removeIds([...items].filter((_2, i2) => i2 !== index)));
                   if (onAfterItemRemove) {
-                    onAfterItemRemove(item);
+                    const { id: id2, ...restItem } = item;
+                    onAfterItemRemove(restItem);
                   }
                 }
               }) })
             },
-            index
+            id
           ))
         }
       )