refactor: event handling in machines

.changeset/hip-papayas-turn.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/tags-input": minor
+---
+
+- Rename `onHighlight` to `onFocusChange`
+- Remove `onTagUpdate`, use `onChange` instead

.changeset/hungry-hats-crash.md

@@ -0,0 +1,10 @@
+---
+"@zag-js/accordion": minor
+---
+
+Remove support for passing value as `string`.
+
+The `value` property must be an array of strings.
+
+- When `multiple` is `false`, the array must contain a single string.
+- When `multiple` is `true`, the array can contain multiple strings.

.changeset/sixty-files-shop.md

@@ -0,0 +1,36 @@
+---
+"@zag-js/color-picker": minor
+"@zag-js/number-input": minor
+"@zag-js/range-slider": minor
+"@zag-js/rating-group": minor
+"@zag-js/toggle-group": minor
+"@zag-js/date-picker": minor
+"@zag-js/file-upload": minor
+"@zag-js/radio-group": minor
+"@zag-js/hover-card": minor
+"@zag-js/pagination": minor
+"@zag-js/tags-input": minor
+"@zag-js/dom-query": minor
+"@zag-js/accordion": minor
+"@zag-js/pin-input": minor
+"@zag-js/pressable": minor
+"@zag-js/carousel": minor
+"@zag-js/checkbox": minor
+"@zag-js/combobox": minor
+"@zag-js/editable": minor
+"@zag-js/presence": minor
+"@zag-js/splitter": minor
+"@zag-js/popover": minor
+"@zag-js/tooltip": minor
+"@zag-js/avatar": minor
+"@zag-js/dialog": minor
+"@zag-js/select": minor
+"@zag-js/slider": minor
+"@zag-js/switch": minor
+"@zag-js/toggle": minor
+"@zag-js/toast": minor
+"@zag-js/menu": minor
+"@zag-js/tabs": minor
+---
+
+Refactor machine event handling and rename `PublicApi` to `Api`

.xstate/accordion.js

@@ -18,7 +18,7 @@ const fetchMachine = createMachine({
   },
   on: {
     "VALUE.SET": {
-      actions: ["setValue", "invokeOnChange"]
+      actions: ["setValue"]
     }
   },
   on: {
@@ -38,23 +38,23 @@ const fetchMachine = createMachine({
     focused: {
       on: {
         "GOTO.NEXT": {
-          actions: "focusNext"
+          actions: "focusNextTrigger"
         },
         "GOTO.PREV": {
-          actions: "focusPrev"
+          actions: "focusPrevTrigger"
         },
         "TRIGGER.CLICK": [{
           cond: "isExpanded && canToggle",
-          actions: ["collapse", "invokeOnChange"]
+          actions: ["collapse"]
         }, {
           cond: "!isExpanded",
-          actions: ["expand", "invokeOnChange"]
+          actions: ["expand"]
         }],
         "GOTO.FIRST": {
-          actions: "focusFirst"
+          actions: "focusFirstTrigger"
         },
         "GOTO.LAST": {
-          actions: "focusLast"
+          actions: "focusLastTrigger"
         },
         "TRIGGER.BLUR": {
           target: "idle",

.xstate/file-upload.js

@@ -17,10 +17,10 @@ const fetchMachine = createMachine({
   },
   on: {
     "FILES.SET": {
-      actions: ["setFilesFromEvent", "invokeOnChange"]
+      actions: ["setFilesFromEvent"]
     },
     "FILE.DELETE": {
-      actions: ["removeFile", "invokeOnChange"]
+      actions: ["removeFile"]
     }
   },
   on: {
@@ -55,7 +55,7 @@ const fetchMachine = createMachine({
       on: {
         "DROPZONE.DROP": {
           target: "idle",
-          actions: ["clearInvalid", "setFilesFromEvent", "invokeOnChange"]
+          actions: ["clearInvalid", "setFilesFromEvent"]
         },
         "DROPZONE.DRAG_LEAVE": {
           target: "idle",

.xstate/number-input.js

@@ -13,7 +13,6 @@ const fetchMachine = createMachine({
   id: "number-input",
   initial: "idle",
   context: {
-    "clampOnBlur": false,
     "isInvalidExponential": false,
     "clampOnBlur && !isInRange && !isEmptyValue": false,
     "isIncrementHint": false,
@@ -24,12 +23,9 @@ const fetchMachine = createMachine({
   },
   entry: ["syncInputValue"],
   on: {
-    SET_VALUE: [{
-      cond: "clampOnBlur",
+    SET_VALUE: {
       actions: ["setValue", "clampValue", "setHintToSet"]
-    }, {
-      actions: ["setValue", "setHintToSet"]
-    }],
+    },
     CLEAR_VALUE: {
       actions: ["clearValue"]
     },
@@ -47,17 +43,19 @@ const fetchMachine = createMachine({
   },
   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: "focused"
+        FOCUS: {
+          target: "focused",
+          actions: ["focusInput", "invokeOnFocus"]
+        }
       }
     },
     focused: {
@@ -168,7 +166,6 @@ const fetchMachine = createMachine({
     CHANGE_INTERVAL: 50
   },
   guards: {
-    "clampOnBlur": ctx => ctx["clampOnBlur"],
     "isInvalidExponential": ctx => ctx["isInvalidExponential"],
     "clampOnBlur && !isInRange && !isEmptyValue": ctx => ctx["clampOnBlur && !isInRange && !isEmptyValue"],
     "isIncrementHint": ctx => ctx["isIncrementHint"],

.xstate/pin-input.js

@@ -27,15 +27,15 @@ const fetchMachine = createMachine({
   on: {
     SET_VALUE: [{
       cond: "hasIndex",
-      actions: ["setValueAtIndex", "invokeOnChange"]
+      actions: ["setValueAtIndex"]
     }, {
-      actions: ["setValue", "invokeOnChange"]
+      actions: ["setValue"]
     }],
     CLEAR_VALUE: [{
       cond: "isDisabled",
-      actions: ["clearValue", "invokeOnChange"]
+      actions: ["clearValue"]
     }, {
-      actions: ["clearValue", "invokeOnChange", "setFocusIndexToFirst"]
+      actions: ["clearValue", "setFocusIndexToFirst"]
     }]
   },
   on: {
@@ -56,24 +56,24 @@ const fetchMachine = createMachine({
       on: {
         INPUT: [{
           cond: "isFinalValue && isValidValue",
-          actions: ["setFocusedValue", "invokeOnChange", "syncInputValue"]
+          actions: ["setFocusedValue", "syncInputValue"]
         }, {
           cond: "isValidValue",
-          actions: ["setFocusedValue", "invokeOnChange", "setNextFocusedIndex", "syncInputValue"]
+          actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
         }],
         PASTE: [{
           cond: "isValidValue",
-          actions: ["setPastedValue", "invokeOnChange", "setLastValueFocusIndex"]
+          actions: ["setPastedValue", "setLastValueFocusIndex"]
         }, {
-          actions: ["resetFocusedValue", "invokeOnChange"]
+          actions: ["revertInputValue"]
         }],
         BLUR: {
           target: "idle",
           actions: "clearFocusedIndex"
         },
         DELETE: {
           cond: "hasValue",
-          actions: ["clearFocusedValue", "invokeOnChange"]
+          actions: ["clearFocusedValue"]
         },
         ARROW_LEFT: {
           actions: "setPrevFocusedIndex"
@@ -83,9 +83,9 @@ const fetchMachine = createMachine({
         },
         BACKSPACE: [{
           cond: "hasValue",
-          actions: ["clearFocusedValue", "invokeOnChange"]
+          actions: ["clearFocusedValue"]
         }, {
-          actions: ["setPrevFocusedIndex", "clearFocusedValue", "invokeOnChange"]
+          actions: ["setPrevFocusedIndex", "clearFocusedValue"]
         }],
         ENTER: {
           cond: "isValueComplete",

.xstate/range-slider.js

@@ -19,7 +19,7 @@ const fetchMachine = createMachine({
     "isVertical": false,
     "isVertical": false
   },
-  entry: ["checkValue"],
+  entry: ["coarseValue"],
   activities: ["trackFormControlState", "trackThumbsSize"],
   on: {
     SET_VALUE: [{
@@ -49,7 +49,7 @@ const fetchMachine = createMachine({
         },
         FOCUS: {
           target: "focus",
-          actions: "setActiveIndex"
+          actions: "setFocusedIndex"
         }
       }
     },
@@ -90,7 +90,7 @@ const fetchMachine = createMachine({
         },
         BLUR: {
           target: "idle",
-          actions: "clearActiveIndex"
+          actions: "clearFocusedIndex"
         }
       }
     },

.xstate/select.js

@@ -23,16 +23,15 @@ const fetchMachine = createMachine({
   initial: "idle",
   on: {
     HIGHLIGHT_OPTION: {
-      actions: ["setHighlightedOption", "invokeOnHighlight"]
+      actions: ["setHighlightedOption"]
     },
     SELECT_OPTION: {
-      actions: ["setSelectedOption", "invokeOnSelect"]
+      actions: ["setSelectedOption"]
     },
     CLEAR_SELECTED: {
-      actions: ["clearSelectedOption", "invokeOnSelect"]
+      actions: ["clearSelectedOption"]
     }
   },
-  entry: ["setInitialSelectedOption"],
   activities: ["trackFormControlState"],
   on: {
     UPDATE_CONTEXT: {
@@ -70,32 +69,32 @@ const fetchMachine = createMachine({
         },
         ARROW_UP: {
           target: "open",
-          actions: ["highlightLastOption", "invokeOnHighlight"]
+          actions: ["highlightLastOption"]
         },
         ARROW_DOWN: {
           target: "open",
-          actions: ["highlightFirstOption", "invokeOnHighlight"]
+          actions: ["highlightFirstOption"]
         },
         ARROW_LEFT: [{
           cond: "hasSelectedOption",
-          actions: ["selectPreviousOption", "invokeOnSelect"]
+          actions: ["selectPreviousOption"]
         }, {
-          actions: ["selectLastOption", "invokeOnSelect"]
+          actions: ["selectLastOption"]
         }],
         ARROW_RIGHT: [{
           cond: "hasSelectedOption",
-          actions: ["selectNextOption", "invokeOnSelect"]
+          actions: ["selectNextOption"]
         }, {
-          actions: ["selectFirstOption", "invokeOnSelect"]
+          actions: ["selectFirstOption"]
         }],
         HOME: {
-          actions: ["selectFirstOption", "invokeOnSelect"]
+          actions: ["selectFirstOption"]
         },
         END: {
-          actions: ["selectLastOption", "invokeOnSelect"]
+          actions: ["selectLastOption"]
         },
         TYPEAHEAD: {
-          actions: ["selectMatchingOption", "invokeOnSelect"]
+          actions: ["selectMatchingOption"]
         },
         OPEN: {
           target: "open"
@@ -118,52 +117,52 @@ const fetchMachine = createMachine({
         },
         OPTION_CLICK: [{
           target: "focused",
-          actions: ["selectHighlightedOption", "invokeOnSelect", "invokeOnClose"],
+          actions: ["selectHighlightedOption", "invokeOnClose"],
           cond: "closeOnSelect"
         }, {
-          actions: ["selectHighlightedOption", "invokeOnSelect"]
+          actions: ["selectHighlightedOption"]
         }],
         TRIGGER_KEY: [{
           target: "focused",
-          actions: ["selectHighlightedOption", "invokeOnSelect", "invokeOnClose"],
+          actions: ["selectHighlightedOption", "invokeOnClose"],
           cond: "closeOnSelect"
         }, {
-          actions: ["selectHighlightedOption", "invokeOnSelect"]
+          actions: ["selectHighlightedOption"]
         }],
         BLUR: {
           target: "focused",
           actions: ["invokeOnClose"]
         },
         HOME: {
-          actions: ["highlightFirstOption", "invokeOnHighlight"]
+          actions: ["highlightFirstOption"]
         },
         END: {
-          actions: ["highlightLastOption", "invokeOnHighlight"]
+          actions: ["highlightLastOption"]
         },
         ARROW_DOWN: [{
           cond: "hasHighlightedOption",
-          actions: ["highlightNextOption", "invokeOnHighlight"]
+          actions: ["highlightNextOption"]
         }, {
-          actions: ["highlightFirstOption", "invokeOnHighlight"]
+          actions: ["highlightFirstOption"]
         }],
         ARROW_UP: [{
           cond: "hasHighlightedOption",
-          actions: ["highlightPreviousOption", "invokeOnHighlight"]
+          actions: ["highlightPreviousOption"]
         }, {
-          actions: ["highlightLastOption", "invokeOnHighlight"]
+          actions: ["highlightLastOption"]
         }],
         TYPEAHEAD: {
-          actions: ["highlightMatchingOption", "invokeOnHighlight"]
+          actions: ["highlightMatchingOption"]
         },
         POINTER_MOVE: {
-          actions: ["highlightOption", "invokeOnHighlight"]
+          actions: ["highlightOption"]
         },
         POINTER_LEAVE: {
           actions: ["clearHighlightedOption"]
         },
         TAB: [{
           target: "idle",
-          actions: ["selectHighlightedOption", "invokeOnClose", "invokeOnSelect", "clearHighlightedOption"],
+          actions: ["selectHighlightedOption", "invokeOnClose", "clearHighlightedOption"],
           cond: "selectOnTab"
         }, {
           target: "idle",