refactor: color picker machine (#934)

.changeset/curvy-jokes-promise.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/color-picker": minor
+---
+
+Redesign the color picker API

.xstate/color-picker.js

@@ -11,60 +11,91 @@ const {
 } = actions;
 const fetchMachine = createMachine({
   id: "color-picker",
-  initial: "idle",
-  context: {},
+  initial: ctx.open ? "open" : "idle",
+  context: {
+    "shouldRestoreFocus": false,
+    "shouldRestoreFocus": false
+  },
+  activities: ["trackFormControl"],
   on: {
     "VALUE.SET": {
       actions: ["setValue"]
+    },
+    "CHANNEL_INPUT.FOCUS": [{
+      cond: stateIn("idle"),
+      target: "focused",
+      actions: ["setActiveChannel"]
+    }, {
+      actions: ["setActiveChannel"]
+    }],
+    "CHANNEL_INPUT.BLUR": [{
+      cond: stateIn("focused"),
+      target: "idle",
+      actions: ["setChannelColorFromInput"]
+    }, {
+      actions: ["setChannelColorFromInput"]
+    }],
+    "CHANNEL_INPUT.CHANGE": {
+      actions: ["setChannelColorFromInput"]
     }
   },
-  activities: ["trackFormControl"],
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
     }
   },
   states: {
     idle: {
+      tags: ["closed"],
       on: {
+        OPEN: {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        },
+        "TRIGGER.CLICK": {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        }
+      }
+    },
+    focused: {
+      tags: ["closed", "focused"],
+      on: {
+        OPEN: {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        },
+        "TRIGGER.CLICK": {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        }
+      }
+    },
+    open: {
+      tags: ["open"],
+      activities: ["trackPositioning", "trackDismissableElement"],
+      on: {
+        "TRIGGER.CLICK": {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        },
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"]
         },
         "AREA.POINTER_DOWN": {
-          target: "dragging",
+          target: "open:dragging",
           actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
         },
         "AREA.FOCUS": {
-          target: "focused",
           actions: ["setActiveChannel"]
         },
         "CHANNEL_SLIDER.POINTER_DOWN": {
-          target: "dragging",
+          target: "open:dragging",
           actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
         },
         "CHANNEL_SLIDER.FOCUS": {
-          target: "focused",
-          actions: ["setActiveChannel"]
-        },
-        "CHANNEL_INPUT.FOCUS": {
-          target: "focused",
           actions: ["setActiveChannel"]
         },
-        "CHANNEL_INPUT.CHANGE": {
-          actions: ["setChannelColorFromInput"]
-        }
-      }
-    },
-    focused: {
-      on: {
-        "AREA.POINTER_DOWN": {
-          target: "dragging",
-          actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-        },
-        "CHANNEL_SLIDER.POINTER_DOWN": {
-          target: "dragging",
-          actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-        },
         "AREA.ARROW_LEFT": {
           actions: ["decrementXChannel"]
         },
@@ -107,37 +138,50 @@ const fetchMachine = createMachine({
         "CHANNEL_SLIDER.END": {
           actions: ["setChannelToMax"]
         },
-        "CHANNEL_INPUT.FOCUS": {
-          actions: ["setActiveChannel"]
-        },
-        "CHANNEL_INPUT.CHANGE": {
-          actions: ["setChannelColorFromInput"]
-        },
-        "CHANNEL_SLIDER.BLUR": {
-          target: "idle"
-        },
-        "AREA.BLUR": {
-          target: "idle"
+        INTERACT_OUTSIDE: [{
+          cond: "shouldRestoreFocus",
+          target: "focused",
+          actions: ["setReturnFocus", "invokeOnClose"]
+        }, {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        }],
+        CLOSE: {
+          target: "idle",
+          actions: ["invokeOnClose"]
         }
       }
     },
-    dragging: {
+    "open:dragging": {
+      tags: ["open"],
       exit: ["clearActiveChannel"],
-      activities: ["trackPointerMove", "disableTextSelection"],
+      activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
       on: {
         "AREA.POINTER_MOVE": {
-          actions: ["setAreaColorFromPoint"]
+          actions: ["setAreaColorFromPoint", "focusAreaThumb"]
         },
         "AREA.POINTER_UP": {
-          target: "focused",
+          target: "open",
           actions: ["invokeOnChangeEnd"]
         },
         "CHANNEL_SLIDER.POINTER_MOVE": {
-          actions: ["setChannelColorFromPoint"]
+          actions: ["setChannelColorFromPoint", "focusChannelThumb"]
         },
         "CHANNEL_SLIDER.POINTER_UP": {
-          target: "focused",
+          target: "open",
           actions: ["invokeOnChangeEnd"]
+        },
+        INTERACT_OUTSIDE: [{
+          cond: "shouldRestoreFocus",
+          target: "focused",
+          actions: ["setReturnFocus", "invokeOnClose"]
+        }, {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        }],
+        CLOSE: {
+          target: "idle",
+          actions: ["invokeOnClose"]
         }
       }
     }
@@ -150,5 +194,7 @@ const fetchMachine = createMachine({
       };
     })
   },
-  guards: {}
+  guards: {
+    "shouldRestoreFocus": ctx => ctx["shouldRestoreFocus"]
+  }
 });

.xstate/date-picker.js

@@ -11,7 +11,7 @@ const {
 } = actions;
 const fetchMachine = createMachine({
   id: "datepicker",
-  initial: ctx.inline ? "open" : "idle",
+  initial: ctx.inline || ctx.open ? "open" : "idle",
   context: {
     "isYearView": false,
     "isMonthView": false,
@@ -103,6 +103,10 @@ const fetchMachine = createMachine({
         "TRIGGER.CLICK": {
           target: "open",
           actions: ["focusFirstSelectedDate", "invokeOnOpen"]
+        },
+        OPEN: {
+          target: "open",
+          actions: ["invokeOnOpen"]
         }
       }
     },
@@ -125,6 +129,10 @@ const fetchMachine = createMachine({
         "CELL.FOCUS": {
           target: "open",
           actions: ["setView", "invokeOnOpen"]
+        },
+        OPEN: {
+          target: "open",
+          actions: ["invokeOnOpen"]
         }
       }
     },
@@ -315,7 +323,11 @@ const fetchMachine = createMachine({
         }, {
           target: "focused",
           actions: ["focusTriggerElement", "setStartIndex", "invokeOnClose"]
-        }]
+        }],
+        CLOSE: {
+          target: "idle",
+          actions: ["setStartIndex", "invokeOnClose"]
+        }
       }
     }
   }