@zag-js/color-picker 0.33.2 → 0.35.0

package/src/color-picker.machine.ts

@@ -1,5 +1,5 @@
 import { parseColor, type Color } from "@zag-js/color-utils"
-import { createMachine } from "@zag-js/core"
+import { createMachine, guards } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { trackPointerMove } from "@zag-js/dom-event"
 import { raf } from "@zag-js/dom-query"
@@ -19,6 +19,8 @@ import type {
 } from "./color-picker.types"
 import { getChannelValue } from "./utils/get-channel-input-value"
 
+const { and } = guards
+
 export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
   return createMachine<MachineContext, MachineState>(
@@ -36,6 +38,7 @@ export function machine(userContext: UserDefinedContext) {
         activeChannel: null,
         activeOrientation: null,
         fieldsetDisabled: false,
+        restoreFocus: true,
         positioning: {
           ...ctx.positioning,
           placement: "bottom",
@@ -80,14 +83,30 @@ export function machine(userContext: UserDefinedContext) {
         idle: {
           tags: ["closed"],
           on: {
-            OPEN: {
-              target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"],
-            },
-            "TRIGGER.CLICK": {
+            "CONTROLLED.OPEN": {
               target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"],
+              actions: ["setInitialFocus"],
             },
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"],
+              },
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"],
+              },
+            ],
             "CHANNEL_INPUT.FOCUS": {
               target: "focused",
               actions: ["setActiveChannel"],
@@ -98,14 +117,30 @@ export function machine(userContext: UserDefinedContext) {
         focused: {
           tags: ["closed", "focused"],
           on: {
-            OPEN: {
-              target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"],
-            },
-            "TRIGGER.CLICK": {
+            "CONTROLLED.OPEN": {
               target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"],
+              actions: ["setInitialFocus"],
             },
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"],
+              },
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"],
+              },
+              {
+                target: "open",
+                actions: ["invokeOnOpen", "setInitialFocus"],
+              },
+            ],
             "CHANNEL_INPUT.FOCUS": {
               actions: ["setActiveChannel"],
             },
@@ -123,10 +158,26 @@ export function machine(userContext: UserDefinedContext) {
           tags: ["open"],
           activities: ["trackPositioning", "trackDismissableElement"],
           on: {
-            "TRIGGER.CLICK": {
-              target: "idle",
-              actions: ["invokeOnClose"],
-            },
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "shouldRestoreFocus",
+                target: "focused",
+                actions: ["setReturnFocus"],
+              },
+              {
+                target: "idle",
+              },
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"],
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"],
+              },
+            ],
             "AREA.POINTER_DOWN": {
               target: "open:dragging",
               actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"],
@@ -187,25 +238,39 @@ export function machine(userContext: UserDefinedContext) {
               actions: ["setChannelColorFromInput"],
             },
             INTERACT_OUTSIDE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"],
+              },
               {
                 guard: "shouldRestoreFocus",
                 target: "focused",
-                actions: ["setReturnFocus", "invokeOnClose"],
+                actions: ["invokeOnClose", "setReturnFocus"],
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"],
+              },
+            ],
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"],
               },
               {
                 target: "idle",
                 actions: ["invokeOnClose"],
               },
             ],
-            CLOSE: {
-              target: "idle",
-              actions: ["invokeOnClose"],
-            },
             "SWATCH_TRIGGER.CLICK": [
+              {
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["setValue", "invokeOnClose"],
+              },
               {
                 guard: "closeOnSelect",
                 target: "focused",
-                actions: ["setValue", "setReturnFocus", "invokeOnClose"],
+                actions: ["setValue", "invokeOnClose", "setReturnFocus"],
               },
               {
                 actions: ["setValue"],
@@ -219,6 +284,16 @@ export function machine(userContext: UserDefinedContext) {
           exit: ["clearActiveChannel"],
           activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "shouldRestoreFocus",
+                target: "focused",
+                actions: ["setReturnFocus"],
+              },
+              {
+                target: "idle",
+              },
+            ],
             "AREA.POINTER_MOVE": {
               actions: ["setAreaColorFromPoint", "focusAreaThumb"],
             },
@@ -234,28 +309,39 @@ export function machine(userContext: UserDefinedContext) {
               actions: ["invokeOnChangeEnd"],
             },
             INTERACT_OUTSIDE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"],
+              },
               {
                 guard: "shouldRestoreFocus",
                 target: "focused",
-                actions: ["setReturnFocus", "invokeOnClose"],
+                actions: ["invokeOnClose", "setReturnFocus"],
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"],
+              },
+            ],
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"],
               },
               {
                 target: "idle",
                 actions: ["invokeOnClose"],
               },
             ],
-            CLOSE: {
-              target: "idle",
-              actions: ["invokeOnClose"],
-            },
           },
         },
       },
     },
     {
       guards: {
-        isTargetFocusable: (_ctx, evt) => evt.restoreFocus,
         closeOnSelect: (ctx) => !!ctx.closeOnSelect,
+        isOpenControlled: (ctx) => !!ctx["open.controlled"],
+        shouldRestoreFocus: (ctx) => !!ctx.restoreFocus,
       },
       activities: {
         trackPositioning(ctx) {
@@ -268,26 +354,22 @@ export function machine(userContext: UserDefinedContext) {
             onComplete(data) {
               ctx.currentPlacement = data.placement
             },
-            onCleanup() {
-              ctx.currentPlacement = undefined
-            },
           })
         },
         trackDismissableElement(ctx, _evt, { send }) {
           const getContentEl = () => dom.getContentEl(ctx)
-          let restoreFocus = true
           return trackDismissableElement(getContentEl, {
             exclude: dom.getTriggerEl(ctx),
             defer: true,
             onInteractOutside(event) {
               ctx.onInteractOutside?.(event)
               if (event.defaultPrevented) return
-              restoreFocus = !(event.detail.focusable || event.detail.contextmenu)
+              ctx.restoreFocus = !(event.detail.focusable || event.detail.contextmenu)
             },
             onPointerDownOutside: ctx.onPointerDownOutside,
             onFocusOutside: ctx.onFocusOutside,
             onDismiss() {
-              send({ type: "INTERACT_OUTSIDE", restoreFocus })
+              send({ type: "INTERACT_OUTSIDE" })
             },
           })
         },
@@ -483,8 +565,8 @@ export function machine(userContext: UserDefinedContext) {
         invokeOnClose(ctx) {
           ctx.onOpenChange?.({ open: false })
         },
-        toggleVisibility(ctx, _evt, { send }) {
-          send({ type: ctx.open ? "OPEN" : "CLOSE", src: "controlled" })
+        toggleVisibility(ctx, evt, { send }) {
+          send({ type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt })
         },
       },
       compareFns: {

package/src/color-picker.types.ts

@@ -93,6 +93,10 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
    * Whether the color picker is open
    */
   open?: boolean
+  /**
+   * Whether the color picker open state is controlled by the user
+   */
+  "open.controlled"?: boolean
   /**
    * The color format to use
    */
@@ -133,6 +137,11 @@ type PrivateContext = Context<{
    * The current placement of the color picker
    */
   currentPlacement?: PositioningOptions["placement"]
+  /**
+   *  @internal
+   * Whether the color picker should return focus to the trigger when closed
+   */
+  restoreFocus?: boolean
 }>
 
 type ComputedContext = Readonly<{