@zag-js/color-picker 0.34.0 → 0.35.0

package/dist/index.d.mts

@@ -84,6 +84,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
      */

package/dist/index.d.ts

@@ -84,6 +84,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
      */

package/dist/index.js

@@ -813,6 +813,7 @@ var parse = (colorString) => {
 };
 
 // src/color-picker.machine.ts
+var { and } = import_core.guards;
 function machine(userContext) {
   const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core.createMachine)(
@@ -830,6 +831,7 @@ function machine(userContext) {
         activeChannel: null,
         activeOrientation: null,
         fieldsetDisabled: false,
+        restoreFocus: true,
         positioning: {
           ...ctx.positioning,
           placement: "bottom"
@@ -869,14 +871,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"]
@@ -886,14 +904,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"]
             },
@@ -910,10 +944,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"]
@@ -974,25 +1024,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"]
@@ -1005,6 +1069,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"]
             },
@@ -1020,28 +1094,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) {
@@ -1058,7 +1143,6 @@ function machine(userContext) {
         },
         trackDismissableElement(ctx2, _evt, { send }) {
           const getContentEl = () => dom.getContentEl(ctx2);
-          let restoreFocus = true;
           return (0, import_dismissable.trackDismissableElement)(getContentEl, {
             exclude: dom.getTriggerEl(ctx2),
             defer: true,
@@ -1066,12 +1150,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" });
             }
           });
         },
@@ -1249,8 +1333,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: {