@zag-js/carousel - npm Package Compare versions

Comparing version 1.35.3 to 1.36.0

dist/carousel.machine.js

@@ -41,2 +41,3 @@ "use strict";
 var dom = __toESM(require("./carousel.dom.js"));
+var DRIFT_THRESHOLD = 1;
 var machine = (0, import_core.createMachine)({
@@ -145,3 +146,3 @@ props({ props }) {
     "SNAP.REFRESH": {
-      actions: ["setSnapPoints"]
+      actions: ["setSnapPoints", "scrollToPageIfDrifted"]
     },
@@ -307,3 +308,6 @@ "PAGE.SCROLL": {
         itemEls.forEach(exec);
-        const cleanups = [import_dom_query.resizeObserverBorderBox.observe(el, exec), ...itemEls.map((el2) => import_dom_query.resizeObserverBorderBox.observe(el2, exec))];
+        const cleanups = [
+          import_dom_query.resizeObserverBorderBox.observe(el, exec),
+          ...itemEls.map((el2) => import_dom_query.resizeObserverBorderBox.observe(el2, exec))
+        ];
         return (0, import_utils.callAll)(...cleanups);
@@ -430,2 +434,12 @@ },
       },
+      scrollToPageIfDrifted({ context, scope, computed }) {
+        const el = dom.getItemGroupEl(scope);
+        if (!el) return;
+        const snapPoint = context.get("pageSnapPoints")[context.get("page")];
+        if (snapPoint == null) return;
+        const scrollPos = computed("isHorizontal") ? el.scrollLeft : el.scrollTop;
+        if (Math.abs(scrollPos - snapPoint) <= DRIFT_THRESHOLD) return;
+        const axis = computed("isHorizontal") ? "left" : "top";
+        el.scrollTo({ [axis]: snapPoint, behavior: "instant" });
+      },
       setClosestPage({ context, scope, computed }) {
@@ -432,0 +446,0 @@ const el = dom.getItemGroupEl(scope);

dist/carousel.machine.mjs

@@ -7,2 +7,3 @@ // src/carousel.machine.ts
 import * as dom from "./carousel.dom.mjs";
+var DRIFT_THRESHOLD = 1;
 var machine = createMachine({
@@ -111,3 +112,3 @@ props({ props }) {
     "SNAP.REFRESH": {
-      actions: ["setSnapPoints"]
+      actions: ["setSnapPoints", "scrollToPageIfDrifted"]
     },
@@ -273,3 +274,6 @@ "PAGE.SCROLL": {
         itemEls.forEach(exec);
-        const cleanups = [resizeObserverBorderBox.observe(el, exec), ...itemEls.map((el2) => resizeObserverBorderBox.observe(el2, exec))];
+        const cleanups = [
+          resizeObserverBorderBox.observe(el, exec),
+          ...itemEls.map((el2) => resizeObserverBorderBox.observe(el2, exec))
+        ];
         return callAll(...cleanups);
@@ -396,2 +400,12 @@ },
       },
+      scrollToPageIfDrifted({ context, scope, computed }) {
+        const el = dom.getItemGroupEl(scope);
+        if (!el) return;
+        const snapPoint = context.get("pageSnapPoints")[context.get("page")];
+        if (snapPoint == null) return;
+        const scrollPos = computed("isHorizontal") ? el.scrollLeft : el.scrollTop;
+        if (Math.abs(scrollPos - snapPoint) <= DRIFT_THRESHOLD) return;
+        const axis = computed("isHorizontal") ? "left" : "top";
+        el.scrollTo({ [axis]: snapPoint, behavior: "instant" });
+      },
       setClosestPage({ context, scope, computed }) {
@@ -398,0 +412,0 @@ const el = dom.getItemGroupEl(scope);

package.json

 {
   "name": "@zag-js/carousel",
-  "version": "1.35.3",
+  "version": "1.36.0",
   "description": "Core logic for the carousel widget implemented as a state machine",
@@ -30,8 +30,8 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "1.35.3",
-    "@zag-js/core": "1.35.3",
-    "@zag-js/types": "1.35.3",
-    "@zag-js/dom-query": "1.35.3",
-    "@zag-js/scroll-snap": "1.35.3",
-    "@zag-js/utils": "1.35.3"
+    "@zag-js/anatomy": "1.36.0",
+    "@zag-js/core": "1.36.0",
+    "@zag-js/types": "1.36.0",
+    "@zag-js/dom-query": "1.36.0",
+    "@zag-js/scroll-snap": "1.36.0",
+    "@zag-js/utils": "1.36.0"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

98437

1.28%

Lines of code

2336

1.21%

Dependency changes

• + Added

  @zag-js/anatomy@1.36.0
  (transitive)

• + Added

  @zag-js/core@1.36.0
  (transitive)

• + Added

  @zag-js/dom-query@1.36.0
  (transitive)

• + Added

  @zag-js/scroll-snap@1.36.0
  (transitive)

• + Added

  @zag-js/types@1.36.0
  (transitive)

• + Added

  @zag-js/utils@1.36.0
  (transitive)

• - Removed

  @zag-js/anatomy@1.35.3
  (transitive)

• - Removed

  @zag-js/core@1.35.3
  (transitive)

• - Removed

  @zag-js/dom-query@1.35.3
  (transitive)

• - Removed

  @zag-js/scroll-snap@1.35.3
  (transitive)

• - Removed

  @zag-js/types@1.35.3
  (transitive)

• - Removed

  @zag-js/utils@1.35.3
  (transitive)

• Updated

  @zag-js/anatomy@1.36.0

• Updated

  @zag-js/core@1.36.0

• Updated

  @zag-js/dom-query@1.36.0

• Updated

  @zag-js/scroll-snap@1.36.0

• Updated

  @zag-js/types@1.36.0

• Updated

  @zag-js/utils@1.36.0