refactor: bindable equality check

Author: segunadebayo

.changeset/tender-ducks-beg.md

@@ -0,0 +1,16 @@
+---
+"@zag-js/navigation-menu": patch
+"@zag-js/time-picker": patch
+"@zag-js/tags-input": patch
+"@zag-js/pin-input": patch
+"@zag-js/tree-view": patch
+"@zag-js/svelte": patch
+"@zag-js/combobox": patch
+"@zag-js/react": patch
+"@zag-js/solid": patch
+"@zag-js/select": patch
+"@zag-js/slider": patch
+"@zag-js/vue": patch
+---
+
+Fix issue where machines that hold complex objects

.xstate/pin-input.js

@@ -36,6 +36,7 @@ const fetchMachine = createMachine({
       value: bindable(() => ({
         value: prop("value"),
         defaultValue: prop("defaultValue"),
+        isEqual,
         onChange(value) {
           prop("onValueChange")?.({
             value,

.xstate/slider.js

@@ -41,6 +41,7 @@ const fetchMachine = createMachine({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        isEqual,
         hash(a) {
           return a.join(",");
         },

packages/frameworks/react/src/bindable.ts

@@ -1,13 +1,13 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
-import { identity, isEqual, isFunction } from "@zag-js/utils"
+import { identity, isFunction } from "@zag-js/utils"
 import { useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { useSafeLayoutEffect } from "./use-layout-effect"
 
 export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().value ?? props().defaultValue
 
-  const eq = props().isEqual ?? isEqual
+  const eq = props().isEqual ?? Object.is
 
   const [initialValue] = useState(initial)
   const [value, setValue] = useState(initialValue)

packages/frameworks/solid/src/bindable.ts

@@ -1,11 +1,11 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
-import { isEqual, isFunction } from "@zag-js/utils"
+import { isFunction } from "@zag-js/utils"
 import { createEffect, createMemo, createSignal, type Accessor } from "solid-js"
 
 export function createBindable<T>(props: Accessor<BindableParams<T>>): Bindable<T> {
   const initial = props().value ?? props().defaultValue
 
-  const eq = props().isEqual ?? isEqual
+  const eq = props().isEqual ?? Object.is
 
   const [value, setValue] = createSignal(initial as T)
   const controlled = createMemo(() => props().value != undefined)

packages/frameworks/svelte/src/bindable.svelte.ts

@@ -1,10 +1,10 @@
 import { type Bindable, type BindableParams } from "@zag-js/core"
-import { identity, isEqual, isFunction } from "@zag-js/utils"
+import { identity, isFunction } from "@zag-js/utils"
 import { flushSync } from "svelte"
 
 export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().defaultValue ?? props().value
-  const eq = props().isEqual ?? isEqual
+  const eq = props().isEqual ?? Object.is
 
   let value = $state(initial)
   const controlled = $derived(props().value !== undefined)

packages/frameworks/vue/src/bindable.ts

@@ -1,10 +1,10 @@
 import type { Bindable, BindableParams } from "@zag-js/core"
-import { isFunction, isEqual } from "@zag-js/utils"
-import { shallowRef, computed as __computed } from "vue"
+import { isFunction } from "@zag-js/utils"
+import { computed as __computed, shallowRef } from "vue"
 
 export function bindable<T>(props: () => BindableParams<T>): Bindable<T> {
   const initial = props().defaultValue ?? props().value
-  const eq = props().isEqual ?? isEqual
+  const eq = props().isEqual ?? Object.is
 
   const v = shallowRef(initial)
   const controlled = __computed(() => props().value !== undefined)

packages/machines/combobox/src/combobox.machine.ts

@@ -3,7 +3,7 @@ import { createGuards, createMachine, type Params } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { clickIfLink, observeAttributes, observeChildren, raf, scrollIntoView } from "@zag-js/dom-query"
 import { getPlacement } from "@zag-js/popper"
-import { addOrRemove, isBoolean, match, remove } from "@zag-js/utils"
+import { addOrRemove, isBoolean, isEqual, match, remove } from "@zag-js/utils"
 import { collection } from "./combobox.collection"
 import * as dom from "./combobox.dom"
 import type { ComboboxSchema, Placement } from "./combobox.types"
@@ -54,6 +54,7 @@ export const machine = createMachine<ComboboxSchema>({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        isEqual,
         hash(value) {
           return value.join(",")
         },

packages/machines/navigation-menu/src/navigation-menu.machine.ts

@@ -63,24 +63,20 @@ export const machine = createMachine({
       // nodes
       contentNode: bindable<HTMLElement | null>(() => ({
         defaultValue: null,
-        isEqual: Object.is,
       })),
       triggerRect: bindable<Rect | null>(() => ({
         defaultValue: null,
         sync: true,
       })),
       triggerNode: bindable<HTMLElement | null>(() => ({
-        isEqual: Object.is,
         defaultValue: null,
       })),
 
       // nesting
       parent: bindable<NavigationMenuService | null>(() => ({
-        isEqual: Object.is,
         defaultValue: null,
       })),
       children: bindable<Record<string, NavigationMenuService | null>>(() => ({
-        isEqual: Object.is,
         defaultValue: {},
       })),
     }

packages/machines/pin-input/src/pin-input.machine.ts

@@ -1,6 +1,6 @@
 import { setup } from "@zag-js/core"
 import { dispatchInputValueEvent, raf } from "@zag-js/dom-query"
-import { setValueAtIndex } from "@zag-js/utils"
+import { isEqual, setValueAtIndex } from "@zag-js/utils"
 import * as dom from "./pin-input.dom"
 import type { PinInputSchema } from "./pin-input.types"
 
@@ -30,6 +30,7 @@ export const machine = createMachine({
       value: bindable(() => ({
         value: prop("value"),
         defaultValue: prop("defaultValue"),
+        isEqual,
         onChange(value) {
           prop("onValueChange")?.({ value, valueAsString: value.join("") })
         },

packages/machines/select/src/select.machine.ts

@@ -9,7 +9,7 @@ import {
   trackFormControl,
 } from "@zag-js/dom-query"
 import { getPlacement, type Placement } from "@zag-js/popper"
-import { addOrRemove } from "@zag-js/utils"
+import { addOrRemove, isEqual } from "@zag-js/utils"
 import { collection } from "./select.collection"
 import * as dom from "./select.dom"
 import type { CollectionItem, SelectSchema } from "./select.types"
@@ -38,6 +38,7 @@ export const machine = createMachine<SelectSchema>({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        isEqual,
         onChange(value) {
           const items = prop("collection").findMany(value)
           return prop("onValueChange")?.({ value, items })

packages/machines/slider/src/slider.machine.ts

@@ -1,7 +1,7 @@
 import { createMachine } from "@zag-js/core"
 import { raf, setElementValue, trackFormControl, trackPointerMove } from "@zag-js/dom-query"
 import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
-import { getValuePercent, setValueAtIndex } from "@zag-js/utils"
+import { getValuePercent, isEqual, setValueAtIndex } from "@zag-js/utils"
 import * as dom from "./slider.dom"
 import type { SliderSchema } from "./slider.types"
 import { constrainValue, decrement, getClosestIndex, getRangeAtIndex, increment, normalizeValues } from "./slider.utils"
@@ -38,6 +38,7 @@ export const machine = createMachine<SliderSchema>({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        isEqual,
         hash(a) {
           return a.join(",")
         },

packages/machines/tags-input/src/tags-input.machine.ts

@@ -3,7 +3,7 @@ import { createGuards, createMachine } from "@zag-js/core"
 import { contains, raf, setElementValue, trackFormControl } from "@zag-js/dom-query"
 import { trackInteractOutside } from "@zag-js/interact-outside"
 import { createLiveRegion } from "@zag-js/live-region"
-import { removeAt, uniq, warn } from "@zag-js/utils"
+import { isEqual, removeAt, uniq, warn } from "@zag-js/utils"
 import * as dom from "./tags-input.dom"
 import type { TagsInputSchema } from "./tags-input.types"
 
@@ -51,6 +51,7 @@ export const machine = createMachine<TagsInputSchema>({
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
+        isEqual,
         hash(value) {
           return value.join(", ")
         },

packages/machines/time-picker/src/time-picker.machine.ts

@@ -13,6 +13,7 @@ import {
   getStringifiedValue,
   getTimeValue,
   is12HourFormat,
+  isTimeEqual,
 } from "./time-picker.utils"
 
 const { and } = createGuards<TimePickerSchema>()
@@ -43,6 +44,7 @@ export const machine = createMachine<TimePickerSchema>({
         hash(a) {
           return a?.toString() ?? ""
         },
+        isEqual: isTimeEqual,
         onChange(value) {
           const computed = getComputed()
           prop("onValueChange")?.({

packages/machines/time-picker/src/time-picker.utils.ts

@@ -106,3 +106,8 @@ export function clampTime(value: Time, min: Time | undefined, max: Time | undefi
   }
   return time
 }
+
+export function isTimeEqual(a: Time | null, b: Time | undefined | null) {
+  if (!a || !b) return false
+  return a.hour === b.hour && a.minute === b.minute && a.second === b.second
+}

packages/machines/tree-view/src/tree-view.machine.ts

@@ -1,6 +1,6 @@
 import { createGuards, createMachine } from "@zag-js/core"
 import { getByTypeahead } from "@zag-js/dom-query"
-import { add, addOrRemove, first, remove, uniq } from "@zag-js/utils"
+import { add, addOrRemove, first, isEqual, remove, uniq } from "@zag-js/utils"
 import { collection } from "./tree-view.collection"
 import * as dom from "./tree-view.dom"
 import type { TreeViewSchema } from "./tree-view.types"
@@ -30,6 +30,7 @@ export const machine = createMachine<TreeViewSchema>({
       expandedValue: bindable(() => ({
         defaultValue: prop("defaultExpandedValue"),
         value: prop("expandedValue"),
+        isEqual,
         onChange(value) {
           const focusedValue = getContext().get("focusedValue")
           prop("onExpandedChange")?.({ expandedValue: value, focusedValue })
@@ -38,6 +39,7 @@ export const machine = createMachine<TreeViewSchema>({
       selectedValue: bindable(() => ({
         defaultValue: prop("defaultSelectedValue"),
         value: prop("selectedValue"),
+        isEqual,
         onChange(value) {
           const focusedValue = getContext().get("focusedValue")
           prop("onSelectionChange")?.({ selectedValue: value, focusedValue })