@zag-js/slider 1.27.1 → 1.28.0

package/dist/index.js

@@ -785,18 +785,16 @@ var machine = core.createMachine({
       },
       trackThumbSize({ context, scope, prop }) {
         if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
-        return domQuery.trackElementRect(getThumbEls(scope), {
-          box: "border-box",
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            if (rects.length === 0) return;
-            const size = utils.pick(rects[0], ["width", "height"]);
-            if (isEqualSize(context.get("thumbSize"), size)) return;
-            context.set("thumbSize", size);
-          }
-        });
+        const exec = (el) => {
+          const rect = getOffsetRect(el);
+          const size = utils.pick(rect, ["width", "height"]);
+          if (isEqualSize(context.get("thumbSize"), size)) return;
+          context.set("thumbSize", size);
+        };
+        const thumbEls = getThumbEls(scope);
+        thumbEls.forEach(exec);
+        const cleanups = thumbEls.map((el) => domQuery.resizeObserverBorderBox.observe(el, () => exec(el)));
+        return utils.callAll(...cleanups);
       }
     },
     actions: {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { raf, setElementValue, trackElementRect, queryAll, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setValueAtIndex, pick, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
+import { raf, setElementValue, queryAll, resizeObserverBorderBox, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
+import { setValueAtIndex, callAll, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, pick, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine, memo } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -783,18 +783,16 @@ var machine = createMachine({
       },
       trackThumbSize({ context, scope, prop }) {
         if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
-        return trackElementRect(getThumbEls(scope), {
-          box: "border-box",
-          measure(el) {
-            return getOffsetRect(el);
-          },
-          onEntry({ rects }) {
-            if (rects.length === 0) return;
-            const size = pick(rects[0], ["width", "height"]);
-            if (isEqualSize(context.get("thumbSize"), size)) return;
-            context.set("thumbSize", size);
-          }
-        });
+        const exec = (el) => {
+          const rect = getOffsetRect(el);
+          const size = pick(rect, ["width", "height"]);
+          if (isEqualSize(context.get("thumbSize"), size)) return;
+          context.set("thumbSize", size);
+        };
+        const thumbEls = getThumbEls(scope);
+        thumbEls.forEach(exec);
+        const cleanups = thumbEls.map((el) => resizeObserverBorderBox.observe(el, () => exec(el)));
+        return callAll(...cleanups);
       }
     },
     actions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.27.1",
-    "@zag-js/core": "1.27.1",
-    "@zag-js/dom-query": "1.27.1",
-    "@zag-js/utils": "1.27.1",
-    "@zag-js/types": "1.27.1"
+    "@zag-js/anatomy": "1.28.0",
+    "@zag-js/core": "1.28.0",
+    "@zag-js/dom-query": "1.28.0",
+    "@zag-js/types": "1.28.0",
+    "@zag-js/utils": "1.28.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"