@eightshift/ui-components 6.0.9 → 6.0.11

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.11",
 	"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"
 	}
 }