@zag-js/number-input 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.16.0",
-    "@zag-js/core": "0.16.0",
-    "@zag-js/dom-query": "0.16.0",
-    "@zag-js/dom-event": "0.16.0",
-    "@zag-js/form-utils": "0.16.0",
-    "@zag-js/mutation-observer": "0.16.0",
-    "@zag-js/number-utils": "0.16.0",
-    "@zag-js/utils": "0.16.0",
-    "@zag-js/types": "0.16.0"
+    "@zag-js/anatomy": "0.17.0",
+    "@zag-js/core": "0.17.0",
+    "@zag-js/dom-query": "0.17.0",
+    "@zag-js/dom-event": "0.17.0",
+    "@zag-js/form-utils": "0.17.0",
+    "@zag-js/mutation-observer": "0.17.0",
+    "@zag-js/number-utils": "0.17.0",
+    "@zag-js/utils": "0.17.0",
+    "@zag-js/types": "0.17.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -1,4 +1,4 @@
 export { anatomy } from "./number-input.anatomy"
 export { connect } from "./number-input.connect"
 export { machine } from "./number-input.machine"
-export type { UserDefinedContext as Context, PublicApi } from "./number-input.types"
+export type { UserDefinedContext as Context, MachineApi as Api } from "./number-input.types"

package/src/number-input.connect.ts

@@ -4,10 +4,10 @@ import { roundToDevicePixel } from "@zag-js/number-utils"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { parts } from "./number-input.anatomy"
 import { dom } from "./number-input.dom"
-import type { PublicApi, Send, State } from "./number-input.types"
+import type { MachineApi, Send, State } from "./number-input.types"
 import { utils } from "./number-input.utils"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
   const isFocused = state.hasTag("focus")
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid
 

package/src/number-input.machine.ts

@@ -54,7 +54,7 @@ export function machine(userContext: UserDefinedContext) {
       },
 
       watch: {
-        value: ["invokeOnChange", "dispatchChangeEvent"],
+        value: ["syncInputElement"],
         isOutOfRange: ["invokeOnInvalid"],
         scrubberCursorPoint: ["setVirtualCursorPosition"],
       },
@@ -62,15 +62,9 @@ export function machine(userContext: UserDefinedContext) {
       entry: ["syncInputValue"],
 
       on: {
-        SET_VALUE: [
-          {
-            guard: "clampOnBlur",
-            actions: ["setValue", "clampValue", "setHintToSet"],
-          },
-          {
-            actions: ["setValue", "setHintToSet"],
-          },
-        ],
+        SET_VALUE: {
+          actions: ["setValue", "clampValue", "setHintToSet"],
+        },
         CLEAR_VALUE: {
           actions: ["clearValue"],
         },
@@ -84,17 +78,19 @@ export function machine(userContext: UserDefinedContext) {
 
       states: {
         idle: {
-          exit: "invokeOnFocus",
           on: {
             PRESS_DOWN: {
               target: "before:spin",
-              actions: ["focusInput", "setHint"],
+              actions: ["focusInput", "invokeOnFocus", "setHint"],
             },
             PRESS_DOWN_SCRUBBER: {
               target: "scrubbing",
-              actions: ["focusInput", "setHint", "setCursorPoint"],
+              actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"],
+            },
+            FOCUS: {
+              target: "focused",
+              actions: ["focusInput", "invokeOnFocus"],
             },
-            FOCUS: "focused",
           },
         },
 
@@ -290,35 +286,37 @@ export function machine(userContext: UserDefinedContext) {
       actions: {
         focusInput(ctx) {
           if (!ctx.focusInputOnChange) return
-          const input = dom.getInputEl(ctx)
-          raf(() => input?.focus())
+          const inputEl = dom.getInputEl(ctx)
+          raf(() => {
+            inputEl?.focus()
+          })
         },
         increment(ctx, evt) {
-          ctx.value = utils.increment(ctx, evt.step)
+          set.value(ctx, utils.increment(ctx, evt.step))
         },
         decrement(ctx, evt) {
-          ctx.value = utils.decrement(ctx, evt.step)
+          set.value(ctx, utils.decrement(ctx, evt.step))
         },
         clampValue(ctx) {
-          ctx.value = utils.clamp(ctx)
+          set.value(ctx, utils.clamp(ctx))
         },
         roundValue(ctx) {
-          if (ctx.value !== "") {
-            ctx.value = utils.round(ctx)
-          }
+          if (ctx.value === "") return
+          set.value(ctx, utils.round(ctx))
         },
         setValue(ctx, evt) {
-          const value = evt.target?.value ?? evt.value
-          ctx.value = utils.sanitize(ctx, utils.parse(ctx, value.toString()))
+          let value = evt.target?.value ?? evt.value
+          value = utils.sanitize(ctx, utils.parse(ctx, value.toString()))
+          set.value(ctx, value)
         },
         clearValue(ctx) {
-          ctx.value = ""
+          set.value(ctx, "")
         },
         setToMax(ctx) {
-          ctx.value = ctx.max.toString()
+          set.value(ctx, ctx.max.toString())
         },
         setToMin(ctx) {
-          ctx.value = ctx.min.toString()
+          set.value(ctx, ctx.min.toString())
         },
         setHint(ctx, evt) {
           ctx.hint = evt.hint
@@ -329,12 +327,6 @@ export function machine(userContext: UserDefinedContext) {
         setHintToSet(ctx) {
           ctx.hint = "set"
         },
-        invokeOnChange(ctx) {
-          ctx.onChange?.({
-            value: ctx.value,
-            valueAsNumber: ctx.valueAsNumber,
-          })
-        },
         invokeOnFocus(ctx, evt) {
           let srcElement: HTMLElement | null = null
 
@@ -353,10 +345,7 @@ export function machine(userContext: UserDefinedContext) {
           })
         },
         invokeOnBlur(ctx) {
-          ctx.onBlur?.({
-            value: ctx.value,
-            valueAsNumber: ctx.valueAsNumber,
-          })
+          ctx.onBlur?.({ value: ctx.value, valueAsNumber: ctx.valueAsNumber })
         },
         invokeOnInvalid(ctx) {
           if (!ctx.isOutOfRange) return
@@ -367,12 +356,16 @@ export function machine(userContext: UserDefinedContext) {
             valueAsNumber: ctx.valueAsNumber,
           })
         },
-        // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
+        syncInputElement(ctx) {
+          const inputEl = dom.getInputEl(ctx)
+          dom.setValue(inputEl, ctx.formattedValue)
+        },
         syncInputValue(ctx) {
-          const input = dom.getInputEl(ctx)
-          if (!input || input.value == ctx.value) return
-          const value = utils.parse(ctx, input.value)
-          ctx.value = utils.sanitize(ctx, value)
+          const inputEl = dom.getInputEl(ctx)
+          if (!inputEl || inputEl.value == ctx.value) return
+
+          const value = utils.parse(ctx, inputEl.value)
+          set.value(ctx, utils.sanitize(ctx, value))
         },
         setCursorPoint(ctx, evt) {
           ctx.scrubberCursorPoint = evt.point
@@ -386,11 +379,25 @@ export function machine(userContext: UserDefinedContext) {
           const { x, y } = ctx.scrubberCursorPoint
           cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`
         },
-        dispatchChangeEvent(ctx) {
-          const inputEl = dom.getInputEl(ctx)
-          dispatchInputValueEvent(inputEl, { value: ctx.formattedValue })
-        },
       },
     },
   )
 }
+
+const invoke = {
+  onChange: (ctx: MachineContext) => {
+    // invoke callback
+    ctx.onChange?.({ value: ctx.value, valueAsNumber: ctx.valueAsNumber })
+
+    // form event
+    const inputEl = dom.getInputEl(ctx)
+    dispatchInputValueEvent(inputEl, { value: ctx.formattedValue })
+  },
+}
+
+const set = {
+  value: (ctx: MachineContext, value: string) => {
+    ctx.value = value
+    invoke.onChange(ctx)
+  },
+}

package/src/number-input.types.ts

@@ -154,68 +154,6 @@ type PublicContext = DirectionProperty &
     spinOnPress?: boolean
   }
 
-export type PublicApi<T extends PropTypes = PropTypes> = {
-  /**
-   * Whether the input is focused.
-   */
-  isFocused: boolean
-  /**
-   * Whether the input is invalid.
-   */
-  isInvalid: boolean
-  /**
-   * Whether the input value is empty.
-   */
-  isValueEmpty: boolean
-  /**
-   * The formatted value of the input.
-   */
-  value: string
-  /**
-   * The value of the input as a number.
-   */
-  valueAsNumber: number
-  /**
-   * Function to set the value of the input.
-   */
-  setValue(value: string | number): void
-  /**
-   * Function to clear the value of the input.
-   */
-  clearValue(): void
-  /**
-   * Function to increment the value of the input by the step.
-   */
-  increment(): void
-  /**
-   * Function to decrement the value of the input by the step.
-   */
-  decrement(): void
-  /**
-   * Function to set the value of the input to the max.
-   */
-  setToMax(): void
-  /**
-   * Function to set the value of the input to the min.
-   */
-  setToMin(): void
-  /**
-   * Function to focus the input.
-   */
-  focus(): void
-  /**
-   * Function to blur the input.
-   */
-  blur(): void
-  rootProps: T["element"]
-  labelProps: T["label"]
-  controlProps: T["element"]
-  inputProps: T["input"]
-  decrementTriggerProps: T["button"]
-  incrementTriggerProps: T["button"]
-  scrubberProps: T["element"]
-}
-
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
 type ComputedContext = Readonly<{
@@ -294,3 +232,65 @@ export type MachineState = {
 export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
+
+export type MachineApi<T extends PropTypes = PropTypes> = {
+  /**
+   * Whether the input is focused.
+   */
+  isFocused: boolean
+  /**
+   * Whether the input is invalid.
+   */
+  isInvalid: boolean
+  /**
+   * Whether the input value is empty.
+   */
+  isValueEmpty: boolean
+  /**
+   * The formatted value of the input.
+   */
+  value: string
+  /**
+   * The value of the input as a number.
+   */
+  valueAsNumber: number
+  /**
+   * Function to set the value of the input.
+   */
+  setValue(value: string | number): void
+  /**
+   * Function to clear the value of the input.
+   */
+  clearValue(): void
+  /**
+   * Function to increment the value of the input by the step.
+   */
+  increment(): void
+  /**
+   * Function to decrement the value of the input by the step.
+   */
+  decrement(): void
+  /**
+   * Function to set the value of the input to the max.
+   */
+  setToMax(): void
+  /**
+   * Function to set the value of the input to the min.
+   */
+  setToMin(): void
+  /**
+   * Function to focus the input.
+   */
+  focus(): void
+  /**
+   * Function to blur the input.
+   */
+  blur(): void
+  rootProps: T["element"]
+  labelProps: T["label"]
+  controlProps: T["element"]
+  inputProps: T["input"]
+  decrementTriggerProps: T["button"]
+  incrementTriggerProps: T["button"]
+  scrubberProps: T["element"]
+}