@zag-js/slider 1.0.0 → 1.0.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
@@ -198,6 +198,7 @@ interface SliderSchema {
     guard: string;
 }
 type SliderService = Service<SliderSchema>;
+type SliderMachine = Machine<SliderSchema>;
 interface Size {
     width: number;
     height: number;
@@ -288,11 +289,11 @@ interface SliderApi<T extends PropTypes = PropTypes> {
 
 declare function connect<T extends PropTypes>(service: SliderService, normalize: NormalizeProps<T>): SliderApi<T>;
 
-declare const machine: _zag_js_core.MachineConfig<SliderSchema>;
+declare const machine: _zag_js_core.Machine<SliderSchema>;
 
 declare const props: (keyof SliderProps)[];
 declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
 declare const thumbProps: (keyof ThumbProps)[];
 declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
 
-export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Service, EventObject } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "valueText" | "track" | "range" | "control" | "markerGroup" | "marker" | "draggingIndicator">;
 
@@ -198,6 +198,7 @@ interface SliderSchema {
     guard: string;
 }
 type SliderService = Service<SliderSchema>;
+type SliderMachine = Machine<SliderSchema>;
 interface Size {
     width: number;
     height: number;
@@ -288,11 +289,11 @@ interface SliderApi<T extends PropTypes = PropTypes> {
 
 declare function connect<T extends PropTypes>(service: SliderService, normalize: NormalizeProps<T>): SliderApi<T>;
 
-declare const machine: _zag_js_core.MachineConfig<SliderSchema>;
+declare const machine: _zag_js_core.Machine<SliderSchema>;
 
 declare const props: (keyof SliderProps)[];
 declare const splitProps: <Props extends Partial<SliderProps>>(props: Props) => [Partial<SliderProps>, Omit<Props, keyof SliderProps>];
 declare const thumbProps: (keyof ThumbProps)[];
 declare const splitThumbProps: <Props extends ThumbProps>(props: Props) => [ThumbProps, Omit<Props, keyof ThumbProps>];
 
-export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };
+export { type SliderApi as Api, type DraggingIndicatorProps, type ElementIds, type FocusChangeDetails, type SliderMachine as Machine, type MarkerProps, type SliderProps as Props, type SliderService as Service, type ThumbProps, type ValueChangeDetails, type ValueTextDetails, anatomy, connect, machine, props, splitProps, splitThumbProps, thumbProps };

package/dist/index.js

@@ -542,13 +542,13 @@ var machine = core.createMachine({
       origin: "start",
       orientation: "horizontal",
       minStepsBetweenThumbs: 0,
-      ...utils.compact(props2)
+      ...props2
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       thumbSize: bindable(() => ({
         defaultValue: prop("thumbSize") || null
@@ -556,9 +556,11 @@ var machine = core.createMachine({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        hash(a) {
+          return a.join(",");
+        },
         onChange(value) {
           prop("onValueChange")?.({ value });
-          dispatchChangeEvent(scope, value);
         }
       })),
       focusedIndex: bindable(() => ({
@@ -585,11 +587,10 @@ var machine = core.createMachine({
     }
   },
   watch({ track, action, context }) {
-    track([() => context.get("value").join(",")], () => {
-      action(["syncInputElements"]);
+    track([() => context.hash("value")], () => {
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
   },
-  entry: ["coarseValue"],
   effects: ["trackFormControlState", "trackThumbsSize"],
   on: {
     SET_VALUE: [
@@ -706,6 +707,9 @@ var machine = core.createMachine({
       }
     },
     actions: {
+      dispatchChangeEvent({ context, scope }) {
+        dispatchChangeEvent(scope, context.get("value"));
+      },
       syncInputElements({ context, scope }) {
         context.get("value").forEach((value, index) => {
           const inputEl = getHiddenInputEl(scope, index);
@@ -766,11 +770,6 @@ var machine = core.createMachine({
         const { max } = getRangeAtIndex(params, index);
         context.set("value", (prev) => utils.setValueAtIndex(prev, index, max));
       },
-      coarseValue(params) {
-        const { context } = params;
-        const value = normalizeValues(params, context.get("value"));
-        context.set("value", value);
-      },
       setValueAtIndex(params) {
         const { context, event } = params;
         const value = constrainValue(params, event.value, event.index);

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { trackFormControl, trackPointerMove, setElementValue, raf, queryAll, getRelativePoint, dispatchInputValueEvent, dataAttr, ariaAttr, getEventStep, getEventKey, isLeftClick, isModifierKey, getEventPoint } from '@zag-js/dom-query';
-import { compact, getValuePercent, setValueAtIndex, createSplitProps, getPercentValue, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, first, last, getValueTransformer } from '@zag-js/utils';
+import { getValuePercent, setValueAtIndex, createSplitProps, getPercentValue, getValueRanges, snapValueToStep, clampValue, getPreviousStepValue, getNextStepValue, getClosestValueIndex, first, last, getValueTransformer } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { trackElementsSize } from '@zag-js/element-size';
 import { createProps } from '@zag-js/types';
@@ -540,13 +540,13 @@ var machine = createMachine({
       origin: "start",
       orientation: "horizontal",
       minStepsBetweenThumbs: 0,
-      ...compact(props2)
+      ...props2
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       thumbSize: bindable(() => ({
         defaultValue: prop("thumbSize") || null
@@ -554,9 +554,11 @@ var machine = createMachine({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        hash(a) {
+          return a.join(",");
+        },
         onChange(value) {
           prop("onValueChange")?.({ value });
-          dispatchChangeEvent(scope, value);
         }
       })),
       focusedIndex: bindable(() => ({
@@ -583,11 +585,10 @@ var machine = createMachine({
     }
   },
   watch({ track, action, context }) {
-    track([() => context.get("value").join(",")], () => {
-      action(["syncInputElements"]);
+    track([() => context.hash("value")], () => {
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
   },
-  entry: ["coarseValue"],
   effects: ["trackFormControlState", "trackThumbsSize"],
   on: {
     SET_VALUE: [
@@ -704,6 +705,9 @@ var machine = createMachine({
       }
     },
     actions: {
+      dispatchChangeEvent({ context, scope }) {
+        dispatchChangeEvent(scope, context.get("value"));
+      },
       syncInputElements({ context, scope }) {
         context.get("value").forEach((value, index) => {
           const inputEl = getHiddenInputEl(scope, index);
@@ -764,11 +768,6 @@ var machine = createMachine({
         const { max } = getRangeAtIndex(params, index);
         context.set("value", (prev) => setValueAtIndex(prev, index, max));
       },
-      coarseValue(params) {
-        const { context } = params;
-        const value = normalizeValues(params, context.get("value"));
-        context.set("value", value);
-      },
       setValueAtIndex(params) {
         const { context, event } = params;
         const value = constrainValue(params, event.value, event.index);

package/package.json

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