@zag-js/slider 1.8.0 → 1.8.2

package/dist/index.js

@@ -4,7 +4,6 @@ var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
-var elementSize = require('@zag-js/element-size');
 var types = require('@zag-js/types');
 
 // src/slider.anatomy.ts
@@ -32,11 +31,11 @@ var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text
 var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+var getThumbEls = (ctx) => domQuery.queryAll(getControlEl(ctx), "[role=slider]");
+var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getElements = (ctx) => domQuery.queryAll(getControlEl(ctx), "[role=slider]");
-var getFirstEl = (ctx) => getElements(ctx)[0];
-var getValueFromPoint = (params, point) => {
+var getPointValue = (params, point) => {
   const { prop, scope } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
@@ -55,6 +54,12 @@ var dispatchChangeEvent = (ctx, value) => {
     domQuery.dispatchInputValueEvent(inputEl, { value: value2 });
   });
 };
+var getOffsetRect = (el) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
 function getBounds(value) {
   const firstValue = value[0];
   const lastThumb = value[value.length - 1];
@@ -306,7 +311,7 @@ function connect(service, normalize2) {
         onClick(event) {
           if (!interactive) return;
           event.preventDefault();
-          getFirstEl(scope)?.focus();
+          getFirstThumbEl(scope)?.focus();
         },
         style: {
           userSelect: "none",
@@ -611,7 +616,7 @@ var machine = core.createMachine({
       action(["syncInputElements", "dispatchChangeEvent"]);
     });
   },
-  effects: ["trackFormControlState", "trackThumbsSize"],
+  effects: ["trackFormControlState", "trackThumbSize"],
   on: {
     SET_VALUE: [
       {
@@ -714,13 +719,16 @@ var machine = core.createMachine({
           }
         });
       },
-      trackThumbsSize({ context, scope, prop }) {
+      trackThumbSize({ context, scope, prop }) {
         if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
-        return elementSize.trackElementsSize({
-          getNodes: () => getElements(scope),
-          observeMutation: true,
-          callback(size) {
-            if (!size || isEqualSize(context.get("thumbSize"), size)) return;
+        return domQuery.trackElementRect(getThumbEls(scope), {
+          box: "border-box",
+          measure(el) {
+            return getOffsetRect(el);
+          },
+          onEntry({ rects }) {
+            const size = utils.pick(rects[0], ["width", "height"]);
+            if (isEqualSize(context.get("thumbSize"), size)) return;
             context.set("thumbSize", size);
           }
         });
@@ -741,7 +749,7 @@ var machine = core.createMachine({
       },
       setClosestThumbIndex(params) {
         const { context, event } = params;
-        const pointValue = getValueFromPoint(params, event.point);
+        const pointValue = getPointValue(params, event.point);
         if (pointValue == null) return;
         const focusedIndex = getClosestIndex(params, pointValue);
         context.set("focusedIndex", focusedIndex);
@@ -755,7 +763,7 @@ var machine = core.createMachine({
       setPointerValue(params) {
         queueMicrotask(() => {
           const { context, event } = params;
-          const pointValue = getValueFromPoint(params, event.point);
+          const pointValue = getPointValue(params, event.point);
           if (pointValue == null) return;
           const focusedIndex = context.get("focusedIndex");
           const value = constrainValue(params, pointValue, focusedIndex);

package/dist/index.mjs

@@ -1,8 +1,7 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { raf, setElementValue, queryAll, trackPointerMove, trackFormControl, getRelativePoint, dispatchInputValueEvent, dataAttr, isLeftClick, isModifierKey, getEventPoint, ariaAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
-import { setValueAtIndex, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, getClosestValueIndex, first, last, toPx, getValueTransformer } from '@zag-js/utils';
+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, getClosestValueIndex, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
-import { trackElementsSize } from '@zag-js/element-size';
 import { createProps } from '@zag-js/types';
 
 // src/slider.anatomy.ts
@@ -30,11 +29,11 @@ var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text
 var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+var getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getElements = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
-var getFirstEl = (ctx) => getElements(ctx)[0];
-var getValueFromPoint = (params, point) => {
+var getPointValue = (params, point) => {
   const { prop, scope } = params;
   const controlEl = getControlEl(scope);
   if (!controlEl) return;
@@ -53,6 +52,12 @@ var dispatchChangeEvent = (ctx, value) => {
     dispatchInputValueEvent(inputEl, { value: value2 });
   });
 };
+var getOffsetRect = (el) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0
+});
 function getBounds(value) {
   const firstValue = value[0];
   const lastThumb = value[value.length - 1];
@@ -304,7 +309,7 @@ function connect(service, normalize2) {
         onClick(event) {
           if (!interactive) return;
           event.preventDefault();
-          getFirstEl(scope)?.focus();
+          getFirstThumbEl(scope)?.focus();
         },
         style: {
           userSelect: "none",
@@ -609,7 +614,7 @@ var machine = createMachine({
       action(["syncInputElements", "dispatchChangeEvent"]);
     });
   },
-  effects: ["trackFormControlState", "trackThumbsSize"],
+  effects: ["trackFormControlState", "trackThumbSize"],
   on: {
     SET_VALUE: [
       {
@@ -712,13 +717,16 @@ var machine = createMachine({
           }
         });
       },
-      trackThumbsSize({ context, scope, prop }) {
+      trackThumbSize({ context, scope, prop }) {
         if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
-        return trackElementsSize({
-          getNodes: () => getElements(scope),
-          observeMutation: true,
-          callback(size) {
-            if (!size || isEqualSize(context.get("thumbSize"), size)) return;
+        return trackElementRect(getThumbEls(scope), {
+          box: "border-box",
+          measure(el) {
+            return getOffsetRect(el);
+          },
+          onEntry({ rects }) {
+            const size = pick(rects[0], ["width", "height"]);
+            if (isEqualSize(context.get("thumbSize"), size)) return;
             context.set("thumbSize", size);
           }
         });
@@ -739,7 +747,7 @@ var machine = createMachine({
       },
       setClosestThumbIndex(params) {
         const { context, event } = params;
-        const pointValue = getValueFromPoint(params, event.point);
+        const pointValue = getPointValue(params, event.point);
         if (pointValue == null) return;
         const focusedIndex = getClosestIndex(params, pointValue);
         context.set("focusedIndex", focusedIndex);
@@ -753,7 +761,7 @@ var machine = createMachine({
       setPointerValue(params) {
         queueMicrotask(() => {
           const { context, event } = params;
-          const pointValue = getValueFromPoint(params, event.point);
+          const pointValue = getPointValue(params, event.point);
           if (pointValue == null) return;
           const focusedIndex = context.get("focusedIndex");
           const value = constrainValue(params, pointValue, focusedIndex);

package/package.json

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