@eightshift/ui-components 6.0.9 → 6.0.10

package/dist/assets/style-admin.css

@@ -455,6 +455,7 @@
   --es-color-black: #000;
   --es-color-white: #fff;
   --es-spacing: .25rem;
+  --es-container-xs: 20rem;
   --es-container-lg: 32rem;
   --es-container-2xl: 42rem;
   --es-container-4xl: 56rem;
@@ -1503,6 +1504,10 @@ input[data-rac]::-webkit-search-cancel-button {
   top: var(--es-spacing-3_25);
 }
 
+:is(body, body #wpwrap) .es\:top-4 {
+  top: calc(var(--es-spacing) * 4);
+}
+
 :is(body, body #wpwrap) .es\:top-5 {
   top: calc(var(--es-spacing) * 5);
 }
@@ -1531,6 +1536,10 @@ input[data-rac]::-webkit-search-cancel-button {
   right: calc(var(--es-spacing) * 3);
 }
 
+:is(body, body #wpwrap) .es\:right-4 {
+  right: calc(var(--es-spacing) * 4);
+}
+
 :is(body, body #wpwrap) .es\:right-6 {
   right: calc(var(--es-spacing) * 6);
 }
@@ -1663,10 +1672,6 @@ input[data-rac]::-webkit-search-cancel-button {
   margin: calc(var(--es-spacing) * 1.5);
 }
 
-:is(body, body #wpwrap) .es\:m-5 {
-  margin: calc(var(--es-spacing) * 5);
-}
-
 :is(body, body #wpwrap) .es\:m-auto {
   margin: auto;
 }
@@ -1727,10 +1732,6 @@ input[data-rac]::-webkit-search-cancel-button {
   margin-block: calc(var(--es-spacing) * 2);
 }
 
-:is(body, body #wpwrap) .es\:my-5 {
-  margin-block: calc(var(--es-spacing) * 5);
-}
-
 :is(body, body #wpwrap) .es\:my-auto {
   margin-block: auto;
 }
@@ -1779,6 +1780,10 @@ input[data-rac]::-webkit-search-cancel-button {
   margin-top: calc(var(--es-spacing) * 5);
 }
 
+:is(body, body #wpwrap) .es\:mt-auto {
+  margin-top: auto;
+}
+
 :is(body, body #wpwrap) .es\:mr-0\.5 {
   margin-right: calc(var(--es-spacing) * .5);
 }
@@ -2179,10 +2184,6 @@ input[data-rac]::-webkit-search-cancel-button {
   min-height: 100%;
 }
 
-:is(body, body #wpwrap) .es\:min-h-screen {
-  min-height: 100vh;
-}
-
 :is(body, body #wpwrap) .es\:w-fill {
   width: -moz-available;
   width: -webkit-fill-available;
@@ -2297,6 +2298,10 @@ input[data-rac]::-webkit-search-cancel-button {
   width: 1px;
 }
 
+:is(body, body #wpwrap) .es\:w-xs {
+  width: var(--es-container-xs);
+}
+
 :is(body, body #wpwrap) .es\:max-w-2xl {
   max-width: var(--es-container-2xl);
 }
@@ -3117,8 +3122,8 @@ input[data-rac]::-webkit-search-cancel-button {
   overflow-y: visible;
 }
 
-:is(body, body #wpwrap) .es\:overscroll-contain {
-  overscroll-behavior: contain;
+:is(body, body #wpwrap) .es\:overscroll-none {
+  overscroll-behavior: none;
 }
 
 :is(body, body #wpwrap) .es\:rounded {

package/dist/assets/style-editor.css

@@ -455,6 +455,7 @@
   --es-color-black: #000;
   --es-color-white: #fff;
   --es-spacing: .25rem;
+  --es-container-xs: 20rem;
   --es-container-lg: 32rem;
   --es-container-2xl: 42rem;
   --es-container-4xl: 56rem;
@@ -1471,6 +1472,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   top: var(--es-spacing-3_25);
 }
 
+:is(body, #wpwrap #editor) .es\:top-4 {
+  top: calc(var(--es-spacing) * 4);
+}
+
 :is(body, #wpwrap #editor) .es\:top-5 {
   top: calc(var(--es-spacing) * 5);
 }
@@ -1499,6 +1504,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   right: calc(var(--es-spacing) * 3);
 }
 
+:is(body, #wpwrap #editor) .es\:right-4 {
+  right: calc(var(--es-spacing) * 4);
+}
+
 :is(body, #wpwrap #editor) .es\:right-6 {
   right: calc(var(--es-spacing) * 6);
 }
@@ -1631,10 +1640,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin: calc(var(--es-spacing) * 1.5);
 }
 
-:is(body, #wpwrap #editor) .es\:m-5 {
-  margin: calc(var(--es-spacing) * 5);
-}
-
 :is(body, #wpwrap #editor) .es\:m-auto {
   margin: auto;
 }
@@ -1695,10 +1700,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-block: calc(var(--es-spacing) * 2);
 }
 
-:is(body, #wpwrap #editor) .es\:my-5 {
-  margin-block: calc(var(--es-spacing) * 5);
-}
-
 :is(body, #wpwrap #editor) .es\:my-auto {
   margin-block: auto;
 }
@@ -1747,6 +1748,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   margin-top: calc(var(--es-spacing) * 5);
 }
 
+:is(body, #wpwrap #editor) .es\:mt-auto {
+  margin-top: auto;
+}
+
 :is(body, #wpwrap #editor) .es\:mr-0\.5 {
   margin-right: calc(var(--es-spacing) * .5);
 }
@@ -2147,10 +2152,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   min-height: 100%;
 }
 
-:is(body, #wpwrap #editor) .es\:min-h-screen {
-  min-height: 100vh;
-}
-
 :is(body, #wpwrap #editor) .es\:w-fill {
   width: -moz-available;
   width: -webkit-fill-available;
@@ -2265,6 +2266,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   width: 1px;
 }
 
+:is(body, #wpwrap #editor) .es\:w-xs {
+  width: var(--es-container-xs);
+}
+
 :is(body, #wpwrap #editor) .es\:max-w-2xl {
   max-width: var(--es-container-2xl);
 }
@@ -3085,8 +3090,8 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   overflow-y: visible;
 }
 
-:is(body, #wpwrap #editor) .es\:overscroll-contain {
-  overscroll-behavior: contain;
+:is(body, #wpwrap #editor) .es\:overscroll-none {
+  overscroll-behavior: none;
 }
 
 :is(body, #wpwrap #editor) .es\:rounded {

package/dist/assets/style.css

@@ -455,6 +455,7 @@
   --es-color-black: #000;
   --es-color-white: #fff;
   --es-spacing: .25rem;
+  --es-container-xs: 20rem;
   --es-container-lg: 32rem;
   --es-container-2xl: 42rem;
   --es-container-4xl: 56rem;
@@ -1956,6 +1957,10 @@ input[data-rac]::-webkit-search-cancel-button {
     top: var(--es-spacing-3_25);
   }
 
+  .es\:top-4 {
+    top: calc(var(--es-spacing) * 4);
+  }
+
   .es\:top-5 {
     top: calc(var(--es-spacing) * 5);
   }
@@ -1984,6 +1989,10 @@ input[data-rac]::-webkit-search-cancel-button {
     right: calc(var(--es-spacing) * 3);
   }
 
+  .es\:right-4 {
+    right: calc(var(--es-spacing) * 4);
+  }
+
   .es\:right-6 {
     right: calc(var(--es-spacing) * 6);
   }
@@ -2116,10 +2125,6 @@ input[data-rac]::-webkit-search-cancel-button {
     margin: calc(var(--es-spacing) * 1.5);
   }
 
-  .es\:m-5 {
-    margin: calc(var(--es-spacing) * 5);
-  }
-
   .es\:m-auto {
     margin: auto;
   }
@@ -2180,10 +2185,6 @@ input[data-rac]::-webkit-search-cancel-button {
     margin-block: calc(var(--es-spacing) * 2);
   }
 
-  .es\:my-5 {
-    margin-block: calc(var(--es-spacing) * 5);
-  }
-
   .es\:my-auto {
     margin-block: auto;
   }
@@ -2232,6 +2233,10 @@ input[data-rac]::-webkit-search-cancel-button {
     margin-top: calc(var(--es-spacing) * 5);
   }
 
+  .es\:mt-auto {
+    margin-top: auto;
+  }
+
   .es\:mr-0\.5 {
     margin-right: calc(var(--es-spacing) * .5);
   }
@@ -2632,10 +2637,6 @@ input[data-rac]::-webkit-search-cancel-button {
     min-height: 100%;
   }
 
-  .es\:min-h-screen {
-    min-height: 100vh;
-  }
-
   .es\:w-fill {
     width: -moz-available;
     width: -webkit-fill-available;
@@ -2750,6 +2751,10 @@ input[data-rac]::-webkit-search-cancel-button {
     width: 1px;
   }
 
+  .es\:w-xs {
+    width: var(--es-container-xs);
+  }
+
   .es\:max-w-2xl {
     max-width: var(--es-container-2xl);
   }
@@ -3570,8 +3575,8 @@ input[data-rac]::-webkit-search-cancel-button {
     overflow-y: visible;
   }
 
-  .es\:overscroll-contain {
-    overscroll-behavior: contain;
+  .es\:overscroll-none {
+    overscroll-behavior: none;
   }
 
   .es\:rounded {

package/dist/components/draggable/draggable.js

@@ -1,5 +1,5 @@
 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-sSixe2j_.js";
@@ -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;
@@ -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) {
@@ -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;
@@ -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);
 }
@@ -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
           ))
         }
       )

package/dist/components/expandable/expandable.js

@@ -244,7 +244,8 @@ const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(fun
  * @param {string} props.label - Label to display.
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {string} [props.className] - Classes to pass to the container.
- * @param {string} [props.contentClassName] - Classes to pass to the inner content wrapper.
+ * @param {string} [props.contentClassName] - Classes to pass to the inner content outer wrapper.
+ * @param {string} [props.contentWrapClassName] - Classes to pass to the inner content wrapper.
  * @param {string} [props.labelClassName] - Classes to pass to the label.
  * @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
@@ -275,6 +276,7 @@ const Expandable = (props) => {
     className,
     labelClassName,
     contentClassName,
+    contentWrapClassName,
     headerClassName,
     actions,
     keepActionsOnExpand = false,
@@ -396,7 +398,7 @@ const Expandable = (props) => {
               "es:transition-plus-h",
               contentClassName
             ),
-            children: /* @__PURE__ */ jsx("div", { className: "es:space-y-1 es:px-3 es:py-3.5", children })
+            children: /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-2.5 es:px-3 es:py-3.5", contentWrapClassName), children })
           }
         )
       ]

package/dist/components/slider/column-config-slider.js

@@ -7,7 +7,7 @@ import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-Bj4KTTJt.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-CcjltLEW.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *

package/dist/components/slider/slider.js

@@ -6,7 +6,7 @@ import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { generateMarkers, generateGridTemplate } from "./utils.js";
 import { HStack } from "../layout/hstack.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-Bj4KTTJt.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-CcjltLEW.js";
 /**
  * A single/multi-thumb slider component.
  *

package/dist/{proxy-Bj4KTTJt.js → proxy-CcjltLEW.js}

@@ -5187,13 +5187,22 @@ function distance2D(a, b) {
   const yDelta = distance(a.y, b.y);
   return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
+const overflowStyles = /* @__PURE__ */ new Set(["auto", "scroll"]);
 class PanSession {
-  constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3 } = {}) {
+  constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element } = {}) {
     this.startEvent = null;
     this.lastMoveEvent = null;
     this.lastMoveEventInfo = null;
     this.handlers = {};
     this.contextWindow = window;
+    this.scrollPositions = /* @__PURE__ */ new Map();
+    this.removeScrollListeners = null;
+    this.onElementScroll = (event2) => {
+      this.handleScroll(event2.target);
+    };
+    this.onWindowScroll = () => {
+      this.handleScroll(window);
+    };
     this.updatePoint = () => {
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
@@ -5246,12 +5255,82 @@ class PanSession {
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
     this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+    if (element) {
+      this.startScrollTracking(element);
+    }
+  }
+  /**
+   * Start tracking scroll on ancestors and window.
+   */
+  startScrollTracking(element) {
+    let current = element.parentElement;
+    while (current) {
+      const style = getComputedStyle(current);
+      if (overflowStyles.has(style.overflowX) || overflowStyles.has(style.overflowY)) {
+        this.scrollPositions.set(current, {
+          x: current.scrollLeft,
+          y: current.scrollTop
+        });
+      }
+      current = current.parentElement;
+    }
+    this.scrollPositions.set(window, {
+      x: window.scrollX,
+      y: window.scrollY
+    });
+    window.addEventListener("scroll", this.onElementScroll, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", this.onWindowScroll, {
+      passive: true
+    });
+    this.removeScrollListeners = () => {
+      window.removeEventListener("scroll", this.onElementScroll, {
+        capture: true
+      });
+      window.removeEventListener("scroll", this.onWindowScroll);
+    };
+  }
+  /**
+   * Handle scroll compensation during drag.
+   *
+   * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+   * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+   */
+  handleScroll(target) {
+    const initial = this.scrollPositions.get(target);
+    if (!initial)
+      return;
+    const isWindow = target === window;
+    const current = isWindow ? { x: window.scrollX, y: window.scrollY } : {
+      x: target.scrollLeft,
+      y: target.scrollTop
+    };
+    const delta = { x: current.x - initial.x, y: current.y - initial.y };
+    if (delta.x === 0 && delta.y === 0)
+      return;
+    if (isWindow) {
+      if (this.lastMoveEventInfo) {
+        this.lastMoveEventInfo.point.x += delta.x;
+        this.lastMoveEventInfo.point.y += delta.y;
+      }
+    } else {
+      if (this.history.length > 0) {
+        this.history[0].x -= delta.x;
+        this.history[0].y -= delta.y;
+      }
+    }
+    this.scrollPositions.set(target, current);
+    frame.update(this.updatePoint, true);
   }
   updateHandlers(handlers) {
     this.handlers = handlers;
   }
   end() {
     this.removeListeners && this.removeListeners();
+    this.removeScrollListeners && this.removeScrollListeners();
+    this.scrollPositions.clear();
     cancelFrame(this.updatePoint);
   }
 }
@@ -5488,7 +5567,8 @@ class VisualElementDragControls {
       transformPagePoint: this.visualElement.getTransformPagePoint(),
       dragSnapToOrigin,
       distanceThreshold,
-      contextWindow: getContextWindow(this.visualElement)
+      contextWindow: getContextWindow(this.visualElement),
+      element: this.visualElement.current
     });
   }
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.9",
+	"version": "6.0.10",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -50,15 +50,11 @@
 	"devDependencies": {
 		"@adobe/react-spectrum": "^3.46.0",
 		"@atom-universe/use-web-worker": "^2.2.1",
-		"@dnd-kit/abstract": "^0.1.21",
-		"@dnd-kit/core": "^6.3.1",
-		"@dnd-kit/dom": "^0.1.21",
-		"@dnd-kit/helpers": "^0.1.21",
-		"@dnd-kit/modifiers": "^9.0.0",
-		"@dnd-kit/react": "^0.1.21",
-		"@dnd-kit/sortable": "^10.0.0",
-		"@dnd-kit/utilities": "^3.2.2",
-		"@eslint/compat": "^2.0.0",
+		"@dnd-kit/abstract": "^0.2.1",
+		"@dnd-kit/dom": "^0.2.1",
+		"@dnd-kit/helpers": "^0.2.1",
+		"@dnd-kit/react": "^0.2.1",
+		"@eslint/compat": "^2.0.1",
 		"@react-stately/collections": "^3.12.8",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
 		"@tailwindcss/vite": "^4.1.18",
@@ -76,7 +72,7 @@
 		"css-gradient-parser": "^0.0.18",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-jsdoc": "^61.5.0",
+		"eslint-plugin-jsdoc": "^61.7.1",
 		"eslint-plugin-prettier": "^5.5.4",
 		"glob": "^13.0.0",
 		"globals": "^16.5.0",
@@ -107,6 +103,6 @@
 	"dependencies": {
 		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@fontsource-variable/roboto-flex": "^5.2.8",
-		"motion": "^12.24.11"
+		"motion": "^12.25.0"
 	}
 }