refactor: number input

Author: segunadebayo

MIGRATION.md

@@ -1,5 +1,10 @@
 # Migration Guide
 
+- Initial and controlled values are now handled in the machine.
+
+  - `defaultOpen` and `open`
+  - `defaultValue` and `value`
+
 - Pagination
 
   - `api.setCount` is removed in favor of explicitly setting the `count` prop.
@@ -17,6 +22,7 @@
     longer returns a tuple of `[state, send]`.
 
 - Removed `useActor` hook in favor of `useMachine` everywhere.
+- Removed `open.controlled` in favor of `defaultOpen` and `open` props.
 
 ## Avatar
 

packages/core/src/create-machine.ts

@@ -1,18 +1,18 @@
-import type { BaseSchema, GuardFn, MachineConfig } from "./types"
+import type { BaseSchema, GuardFn, MachineConfig, Params, Transition } from "./types"
 
 export function createGuards<T extends BaseSchema>() {
   return {
-    and: (...guards: Array<GuardFn | T["guard"]>) => {
+    and: (...guards: Array<GuardFn<T> | T["guard"]>) => {
       return function andGuard(params: any) {
         return guards.every((str) => params.guard(str))
       }
     },
-    or: (...guards: Array<GuardFn | T["guard"]>) => {
+    or: (...guards: Array<GuardFn<T> | T["guard"]>) => {
       return function orGuard(params: any) {
         return guards.some((str) => params.guard(str))
       }
     },
-    not: (guard: GuardFn | T["guard"]) => {
+    not: (guard: GuardFn<T> | T["guard"]) => {
       return function notGuard(params: any) {
         return !params.guard(guard)
       }
@@ -23,3 +23,17 @@ export function createGuards<T extends BaseSchema>() {
 export function createMachine<T extends BaseSchema>(config: MachineConfig<T>) {
   return config
 }
+
+export function setup<T extends BaseSchema>() {
+  return {
+    guards: createGuards<T>(),
+    createMachine: (config: MachineConfig<T>) => {
+      return createMachine(config)
+    },
+    choose: (transitions: Transition<T> | Transition<T>[]) => {
+      return function chooseFn({ choose }: Params<T>) {
+        return choose(transitions)?.actions
+      }
+    },
+  }
+}

packages/core/src/types.ts

@@ -18,11 +18,11 @@ interface ContextParams<T extends Dict> {
   flush: (fn: VoidFunction) => void
 }
 
-interface PropFn<T extends Dict> {
+export interface PropFn<T extends Dict> {
   <K extends keyof T["props"]>(key: K): T["props"][K]
 }
 
-interface ComputedFn<T extends Dict> {
+export interface ComputedFn<T extends Dict> {
   <K extends keyof T["computed"]>(key: K): T["computed"][K]
 }
 
@@ -86,7 +86,6 @@ export type EventObject = EventType<{ type: string }>
 
 export interface Params<T extends Dict> {
   prop: PropFn<T>
-  bindable: BindableFn
   action: (action: T["action"][]) => void
   context: BindableContext<T>
   refs: BindableRefs<T>
@@ -100,16 +99,24 @@ export interface Params<T extends Dict> {
   computed: ComputedFn<T>
   scope: Scope
   state: Bindable<T["state"]>
+  choose: ChooseFn<T>
+  guard: (key: T["guard"] | GuardFn<T>) => boolean | undefined
 }
 
-export type GuardFn = (params: any) => boolean
+export type GuardFn<T extends Dict> = (params: Params<T>) => boolean
 
-interface Transition<T extends Dict> {
+export interface Transition<T extends Dict> {
   target?: T["state"]
   actions?: T["action"][]
-  guard?: T["guard"] | GuardFn
+  guard?: T["guard"] | GuardFn<T>
 }
 
+type MaybeArray<T> = T | T[]
+
+export type ChooseFn<T extends Dict> = (
+  transitions: MaybeArray<Omit<Transition<T>, "target">>,
+) => Transition<T> | undefined
+
 interface PropsParams<T extends Dict> {
   props: Partial<T["props"]>
   scope: Scope
@@ -120,6 +127,10 @@ interface RefsParams<T extends Dict> {
   context: BindableContext<T>
 }
 
+export type ActionsOrFn<T extends Dict> = T["action"][] | ((params: Params<T>) => T["action"][] | undefined)
+
+export type EffectsOrFn<T extends Dict> = T["effect"][] | ((params: Params<T>) => T["effect"][] | undefined)
+
 export interface MachineConfig<T extends Dict> {
   props?: (params: PropsParams<T>) => T["props"]
   context?: (params: ContextParams<T>) => {
@@ -129,9 +140,9 @@ export interface MachineConfig<T extends Dict> {
     [K in keyof T["computed"]]: (params: ComputedParams<T>) => T["computed"][K]
   }
   initialState: (params: { prop: PropFn<T> }) => T["state"]
-  entry?: T["action"][]
-  exit?: T["action"][]
-  effects?: T["effect"][]
+  entry?: ActionsOrFn<T>
+  exit?: ActionsOrFn<T>
+  effects?: EffectsOrFn<T>
   refs?: (params: RefsParams<T>) => T["refs"]
   dom?: (params: Params<T>) => T["dom"]
   watch?: (params: Params<T>) => void
@@ -141,9 +152,9 @@ export interface MachineConfig<T extends Dict> {
   states: {
     [K in T["state"]]: {
       tags?: T["tag"][]
-      entry?: T["action"][]
-      exit?: T["action"][]
-      effects?: T["effect"][]
+      entry?: ActionsOrFn<T>
+      exit?: ActionsOrFn<T>
+      effects?: EffectsOrFn<T>
       on?: {
         [E in T["event"]["type"]]?: Transition<T> | Array<Transition<T>>
       }

packages/frameworks/react/src/machine.ts

@@ -1,4 +1,17 @@
-import type { BaseSchema, Bindable, BindableContext, BindableRefs, GuardFn, MachineConfig, Service } from "@zag-js/core"
+import type {
+  ActionsOrFn,
+  BaseSchema,
+  Bindable,
+  BindableContext,
+  BindableRefs,
+  ChooseFn,
+  ComputedFn,
+  EffectsOrFn,
+  GuardFn,
+  MachineConfig,
+  Params,
+  Service,
+} from "@zag-js/core"
 import { createScope } from "@zag-js/core"
 import { isFunction, isString, toArray, warn } from "@zag-js/utils"
 import { useLayoutEffect, useMemo, useRef } from "react"
@@ -59,7 +72,7 @@ export function useMachine<T extends BaseSchema>(
 
   const refs: BindableRefs<T> = useRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
-  const getParams = (): any => ({
+  const getParams = (): Params<T> => ({
     state,
     context: ctx,
     event: {
@@ -76,9 +89,12 @@ export function useMachine<T extends BaseSchema>(
     computed,
     flush,
     scope,
+    choose,
   })
 
-  const action = (strs: T["action"][]) => {
+  const action = (keys: ActionsOrFn<T> | undefined) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
     const fns = strs.map((s) => {
       const fn = machine.implementations?.actions?.[s]
       if (!fn) warn(`[zag-js] No implementation found for action "${JSON.stringify(s)}"`)
@@ -89,12 +105,14 @@ export function useMachine<T extends BaseSchema>(
     }
   }
 
-  const guard = (str: T["guard"] | GuardFn) => {
+  const guard = (str: T["guard"] | GuardFn<T>) => {
     if (isFunction(str)) return str(getParams())
     return machine.implementations?.guards?.[str](getParams())
   }
 
-  const effect = (strs: T["effect"][]) => {
+  const effect = (keys: EffectsOrFn<T> | undefined) => {
+    const strs = isFunction(keys) ? keys(getParams()) : keys
+    if (!strs) return
     const fns = strs.map((s) => {
       const fn = machine.implementations?.effects?.[s]
       if (!fn) warn(`[zag-js] No implementation found for effect "${JSON.stringify(s)}"`)
@@ -108,17 +126,28 @@ export function useMachine<T extends BaseSchema>(
     return () => cleanups.forEach((fn) => fn?.())
   }
 
-  const computed = (key: keyof T["computed"]) => {
-    return machine.computed?.[key]({
-      context: ctx as any,
-      event: eventRef.current,
-      prop,
-      refs,
-      scope,
-      computed: computed as any,
+  const choose: ChooseFn<T> = (transitions) => {
+    return toArray(transitions).find((t) => {
+      let result = !t.guard
+      if (isString(t.guard)) result = !!guard(t.guard)
+      else if (isFunction(t.guard)) result = t.guard(getParams())
+      return result
     })
   }
 
+  const computed: ComputedFn<T> = (key) => {
+    return (
+      machine.computed?.[key]({
+        context: ctx as any,
+        event: eventRef.current,
+        prop,
+        refs,
+        scope,
+        computed: computed as any,
+      }) ?? ({} as any)
+    )
+  }
+
   const state = useBindable(() => ({
     defaultValue: machine.initialState({ prop }),
     onChange(nextState, prevState) {
@@ -134,27 +163,27 @@ export function useMachine<T extends BaseSchema>(
       // exit actions
       if (prevState) {
         // @ts-ignore
-        action(machine.states[prevState]?.exit ?? [])
+        action(machine.states[prevState]?.exit)
       }
 
       // transition actions
-      action(transitionRef.current?.actions ?? [])
+      action(transitionRef.current?.actions)
 
       // enter effect
       // @ts-ignore
-      const cleanup = effect(machine.states[nextState]?.effects ?? [])
-      effects.current.set(nextState as string, cleanup)
+      const cleanup = effect(machine.states[nextState]?.effects)
+      if (cleanup) effects.current.set(nextState as string, cleanup)
 
       // root entry actions
       if (prevState === "__init__") {
-        action(machine.entry ?? [])
-        const cleanup = effect(machine.effects ?? [])
-        effects.current.set("__init__", cleanup)
+        action(machine.entry)
+        const cleanup = effect(machine.effects)
+        if (cleanup) effects.current.set("__init__", cleanup)
       }
 
       // enter actions
       // @ts-ignore
-      action(machine.states[nextState]?.entry ?? [])
+      action(machine.states[nextState]?.entry)
     },
   }))
 
@@ -165,7 +194,7 @@ export function useMachine<T extends BaseSchema>(
       fns.forEach((fn) => fn?.())
       effects.current = new Map()
       transitionRef.current = null
-      action(machine.exit ?? [])
+      action(machine.exit)
     }
   }, [])
 
@@ -187,13 +216,7 @@ export function useMachine<T extends BaseSchema>(
         // @ts-ignore
         machine.on?.[event.type]
 
-      const transition = toArray(transitions).find((t) => {
-        let result = !t.guard
-        if (isString(t.guard)) result = !!guard(t.guard)
-        else if (isFunction(t.guard)) result = t.guard(getParams())
-        return result
-      })
-
+      const transition = choose(transitions)
       if (!transition) return
 
       // save current transition

packages/machines/number-input/src/cursor.ts

@@ -1,7 +1,3 @@
-/**
- * Credits: https://github.com/react-component/input-number/blob/master/src/hooks/useCursor.ts
- */
-
 interface Selection {
   start?: number | undefined
   end?: number | undefined
@@ -10,8 +6,8 @@ interface Selection {
   afterTxt?: string | undefined
 }
 
-export function recordCursor(inputEl: HTMLInputElement): Selection | undefined {
-  if (inputEl.ownerDocument.activeElement !== inputEl) return
+export function recordCursor(inputEl: HTMLInputElement | null): Selection | undefined {
+  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return
   try {
     const { selectionStart: start, selectionEnd: end, value } = inputEl
     const beforeTxt = value.substring(0, start!)
@@ -26,8 +22,8 @@ export function recordCursor(inputEl: HTMLInputElement): Selection | undefined {
   } catch {}
 }
 
-export function restoreCursor(inputEl: HTMLInputElement, selection: Selection | undefined) {
-  if (inputEl.ownerDocument.activeElement !== inputEl) return
+export function restoreCursor(inputEl: HTMLInputElement | null, selection: Selection | undefined) {
+  if (!inputEl || inputEl.ownerDocument.activeElement !== inputEl) return
 
   if (!selection) {
     inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length)

packages/machines/number-input/src/index.ts

@@ -2,12 +2,12 @@ export { anatomy } from "./number-input.anatomy"
 export { connect } from "./number-input.connect"
 export { machine } from "./number-input.machine"
 export type {
-  MachineApi as Api,
-  UserDefinedContext as Context,
+  NumberInputApi as Api,
+  NumberInputProps as Props,
+  NumberInputService as Service,
   ElementIds,
   FocusChangeDetails,
   IntlTranslations,
-  Service,
   ValueChangeDetails,
   ValueInvalidDetails,
 } from "./number-input.types"