@zag-js/color-picker 0.33.2 → 0.35.0

package/dist/index.mjs

@@ -775,7 +775,7 @@ function assertFormat(format) {
 
 // src/color-picker.machine.ts
 import { parseColor as parseColor4 } 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";
@@ -791,6 +791,7 @@ var parse = (colorString) => {
 };
 
 // src/color-picker.machine.ts
+var { and } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -808,6 +809,7 @@ function machine(userContext) {
         activeChannel: null,
         activeOrientation: null,
         fieldsetDisabled: false,
+        restoreFocus: true,
         positioning: {
           ...ctx.positioning,
           placement: "bottom"
@@ -847,14 +849,30 @@ function machine(userContext) {
         idle: {
           tags: ["closed"],
           on: {
-            OPEN: {
+            "CONTROLLED.OPEN": {
               target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"]
-            },
-            "TRIGGER.CLICK": {
-              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"]
@@ -864,14 +882,30 @@ function machine(userContext) {
         focused: {
           tags: ["closed", "focused"],
           on: {
-            OPEN: {
+            "CONTROLLED.OPEN": {
               target: "open",
-              actions: ["setInitialFocus", "invokeOnOpen"]
-            },
-            "TRIGGER.CLICK": {
-              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"]
             },
@@ -888,10 +922,26 @@ function machine(userContext) {
           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"]
@@ -952,25 +1002,39 @@ function machine(userContext) {
               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"]
@@ -983,6 +1047,16 @@ function machine(userContext) {
           exit: ["clearActiveChannel"],
           activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "shouldRestoreFocus",
+                target: "focused",
+                actions: ["setReturnFocus"]
+              },
+              {
+                target: "idle"
+              }
+            ],
             "AREA.POINTER_MOVE": {
               actions: ["setAreaColorFromPoint", "focusAreaThumb"]
             },
@@ -998,28 +1072,39 @@ function machine(userContext) {
               actions: ["invokeOnChangeEnd"]
             },
             INTERACT_OUTSIDE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
               {
                 guard: "shouldRestoreFocus",
                 target: "focused",
-                actions: ["setReturnFocus", "invokeOnClose"]
+                actions: ["invokeOnClose", "setReturnFocus"]
               },
               {
                 target: "idle",
                 actions: ["invokeOnClose"]
               }
             ],
-            CLOSE: {
-              target: "idle",
-              actions: ["invokeOnClose"]
-            }
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "idle",
+                actions: ["invokeOnClose"]
+              }
+            ]
           }
         }
       }
     },
     {
       guards: {
-        isTargetFocusable: (_ctx, evt) => evt.restoreFocus,
-        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect
+        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
+        shouldRestoreFocus: (ctx2) => !!ctx2.restoreFocus
       },
       activities: {
         trackPositioning(ctx2) {
@@ -1031,15 +1116,11 @@ function machine(userContext) {
             defer: true,
             onComplete(data) {
               ctx2.currentPlacement = data.placement;
-            },
-            onCleanup() {
-              ctx2.currentPlacement = void 0;
             }
           });
         },
         trackDismissableElement(ctx2, _evt, { send }) {
           const getContentEl = () => dom.getContentEl(ctx2);
-          let restoreFocus = true;
           return trackDismissableElement(getContentEl, {
             exclude: dom.getTriggerEl(ctx2),
             defer: true,
@@ -1047,12 +1128,12 @@ function machine(userContext) {
               ctx2.onInteractOutside?.(event);
               if (event.defaultPrevented)
                 return;
-              restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+              ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
             },
             onPointerDownOutside: ctx2.onPointerDownOutside,
             onFocusOutside: ctx2.onFocusOutside,
             onDismiss() {
-              send({ type: "INTERACT_OUTSIDE", restoreFocus });
+              send({ type: "INTERACT_OUTSIDE" });
             }
           });
         },
@@ -1230,8 +1311,8 @@ function machine(userContext) {
         invokeOnClose(ctx2) {
           ctx2.onOpenChange?.({ open: false });
         },
-        toggleVisibility(ctx2, _evt, { send }) {
-          send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
         }
       },
       compareFns: {