@zag-js/slider 1.26.0 → 1.26.2

package/dist/index.js

@@ -137,13 +137,15 @@ function getVisibility(params) {
   return visibility;
 }
 function getThumbStyle(params, index) {
-  const { computed } = params;
+  const { computed, context } = params;
   const placementProp = computed("isVertical") ? "bottom" : "insetInlineStart";
+  const focusedIndex = context.get("focusedIndex");
   return {
     visibility: getVisibility(params),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
-    [placementProp]: `var(--slider-thumb-offset-${index})`
+    [placementProp]: `var(--slider-thumb-offset-${index})`,
+    zIndex: focusedIndex === index ? 1 : void 0
   };
 }
 function getControlStyle() {
@@ -237,7 +239,31 @@ function increment(params, index, step) {
 }
 function getClosestIndex(params, pointValue) {
   const { context } = params;
-  return utils.getClosestValueIndex(context.get("value"), pointValue);
+  const values = context.get("value");
+  let closestIndex = 0;
+  let minDistance = Math.abs(values[0] - pointValue);
+  for (let i = 1; i < values.length; i++) {
+    const distance = Math.abs(values[i] - pointValue);
+    if (distance <= minDistance) {
+      closestIndex = i;
+      minDistance = distance;
+    }
+  }
+  return selectMovableThumb(params, closestIndex);
+}
+function selectMovableThumb(params, index) {
+  const { context, prop } = params;
+  const values = context.get("value");
+  const max = prop("max");
+  const thumbValue = values[index];
+  if (thumbValue === max) {
+    let movableIndex = index;
+    while (movableIndex > 0 && values[movableIndex - 1] === max) {
+      movableIndex -= 1;
+    }
+    return movableIndex;
+  }
+  return index;
 }
 
 // src/slider.connect.ts
@@ -626,7 +652,7 @@ var machine = core.createMachine({
     });
     track([() => computed("isDisabled")], () => {
       if (computed("isDisabled")) {
-        send({ type: "BLUR" });
+        send({ type: "POINTER_CANCEL" });
       }
     });
   },
@@ -705,7 +731,7 @@ var machine = core.createMachine({
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
-        BLUR: {
+        POINTER_CANCEL: {
           target: "idle",
           actions: ["clearFocusedIndex"]
         }
@@ -775,8 +801,10 @@ var machine = core.createMachine({
         const focusedIndex = getClosestIndex(params, pointValue);
         context.set("focusedIndex", focusedIndex);
       },
-      setFocusedIndex({ context, event }) {
-        context.set("focusedIndex", event.index);
+      setFocusedIndex(params) {
+        const { context, event } = params;
+        const movableIndex = selectMovableThumb(params, event.index);
+        context.set("focusedIndex", movableIndex);
       },
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);

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, getClosestValueIndex, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
+import { setValueAtIndex, pick, getValuePercent, isEqual, createSplitProps, snapValueToStep, clampValue, getValueRanges, getNextStepValue, getPreviousStepValue, getPercentValue, isValueWithinRange, first, last, toPx, getValueTransformer } from '@zag-js/utils';
 import { createMachine, memo } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -135,13 +135,15 @@ function getVisibility(params) {
   return visibility;
 }
 function getThumbStyle(params, index) {
-  const { computed } = params;
+  const { computed, context } = params;
   const placementProp = computed("isVertical") ? "bottom" : "insetInlineStart";
+  const focusedIndex = context.get("focusedIndex");
   return {
     visibility: getVisibility(params),
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
-    [placementProp]: `var(--slider-thumb-offset-${index})`
+    [placementProp]: `var(--slider-thumb-offset-${index})`,
+    zIndex: focusedIndex === index ? 1 : void 0
   };
 }
 function getControlStyle() {
@@ -235,7 +237,31 @@ function increment(params, index, step) {
 }
 function getClosestIndex(params, pointValue) {
   const { context } = params;
-  return getClosestValueIndex(context.get("value"), pointValue);
+  const values = context.get("value");
+  let closestIndex = 0;
+  let minDistance = Math.abs(values[0] - pointValue);
+  for (let i = 1; i < values.length; i++) {
+    const distance = Math.abs(values[i] - pointValue);
+    if (distance <= minDistance) {
+      closestIndex = i;
+      minDistance = distance;
+    }
+  }
+  return selectMovableThumb(params, closestIndex);
+}
+function selectMovableThumb(params, index) {
+  const { context, prop } = params;
+  const values = context.get("value");
+  const max = prop("max");
+  const thumbValue = values[index];
+  if (thumbValue === max) {
+    let movableIndex = index;
+    while (movableIndex > 0 && values[movableIndex - 1] === max) {
+      movableIndex -= 1;
+    }
+    return movableIndex;
+  }
+  return index;
 }
 
 // src/slider.connect.ts
@@ -624,7 +650,7 @@ var machine = createMachine({
     });
     track([() => computed("isDisabled")], () => {
       if (computed("isDisabled")) {
-        send({ type: "BLUR" });
+        send({ type: "POINTER_CANCEL" });
       }
     });
   },
@@ -703,7 +729,7 @@ var machine = createMachine({
         POINTER_MOVE: {
           actions: ["setPointerValue"]
         },
-        BLUR: {
+        POINTER_CANCEL: {
           target: "idle",
           actions: ["clearFocusedIndex"]
         }
@@ -773,8 +799,10 @@ var machine = createMachine({
         const focusedIndex = getClosestIndex(params, pointValue);
         context.set("focusedIndex", focusedIndex);
       },
-      setFocusedIndex({ context, event }) {
-        context.set("focusedIndex", event.index);
+      setFocusedIndex(params) {
+        const { context, event } = params;
+        const movableIndex = selectMovableThumb(params, event.index);
+        context.set("focusedIndex", movableIndex);
       },
       clearFocusedIndex({ context }) {
         context.set("focusedIndex", -1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "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.26.0",
-    "@zag-js/core": "1.26.0",
-    "@zag-js/dom-query": "1.26.0",
-    "@zag-js/utils": "1.26.0",
-    "@zag-js/types": "1.26.0"
+    "@zag-js/anatomy": "1.26.2",
+    "@zag-js/core": "1.26.2",
+    "@zag-js/dom-query": "1.26.2",
+    "@zag-js/utils": "1.26.2",
+    "@zag-js/types": "1.26.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"