@zag-js/color-picker 1.45.0 → 1.47.0

package/dist/color-picker.connect.js

@@ -103,8 +103,7 @@ function connect(service, normalize) {
     },
     format: context.get("format"),
     setFormat(format2) {
-      const formatValue = value.toFormat(format2);
-      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
+      send({ type: "FORMAT.SET", format: format2, src: "set-format" });
     },
     alpha: value.getChannelValue("alpha"),
     setAlpha(alphaValue) {

package/dist/color-picker.connect.mjs

@@ -76,8 +76,7 @@ function connect(service, normalize) {
     },
     format: context.get("format"),
     setFormat(format2) {
-      const formatValue = value.toFormat(format2);
-      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
+      send({ type: "FORMAT.SET", format: format2, src: "set-format" });
     },
     alpha: value.getChannelValue("alpha"),
     setAlpha(alphaValue) {

package/dist/color-picker.machine.js

@@ -398,6 +398,8 @@ var machine = (0, import_core.createMachine)({
           type: "popover",
           exclude: dom.getTriggerEl(scope),
           defer: true,
+          getRootNode: scope.getRootNode,
+          layerStyleTargets: [() => dom.getPositionerEl(scope)],
           onInteractOutside(event) {
             prop("onInteractOutside")?.(event);
             if (event.defaultPrevented) return;
@@ -405,8 +407,8 @@ var machine = (0, import_core.createMachine)({
           },
           onPointerDownOutside: prop("onPointerDownOutside"),
           onFocusOutside: prop("onFocusOutside"),
-          onDismiss() {
-            send({ type: "INTERACT_OUTSIDE" });
+          onDismiss(event) {
+            send({ type: "INTERACT_OUTSIDE", focusVisible: event?.type === "keydown" });
           }
         });
       },
@@ -597,9 +599,12 @@ var machine = (0, import_core.createMachine)({
           element.focus({ preventScroll: true });
         });
       },
-      setReturnFocus({ scope }) {
+      setReturnFocus({ scope, event }) {
+        const contentEl = dom.getContentEl(scope);
+        const focusOptions = getReturnFocusOptions(event);
         (0, import_dom_query.raf)(() => {
-          dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+          if ((0, import_dom_query.isFocusOutside)(scope.getActiveElement(), [contentEl])) return;
+          dom.getTriggerEl(scope)?.focus(focusOptions);
         });
       },
       syncFormatSelectElement({ context, scope }) {
@@ -639,6 +644,10 @@ function syncFormatSelect(scope, format) {
   if (!selectEl) return;
   (0, import_dom_query.raf)(() => (0, import_dom_query.setElementValue)(selectEl, format));
 }
+function getReturnFocusOptions(event) {
+  const focusVisible = event.focusVisible ?? event.previousEvent?.focusVisible;
+  return focusVisible ? { preventScroll: true, focusVisible: true } : { preventScroll: true };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   machine

package/dist/color-picker.machine.mjs

@@ -6,6 +6,7 @@ import {
   disableTextSelection,
   dispatchInputValueEvent,
   getInitialFocus,
+  isFocusOutside,
   raf,
   setElementValue,
   trackFormControl,
@@ -372,6 +373,8 @@ var machine = createMachine({
           type: "popover",
           exclude: dom.getTriggerEl(scope),
           defer: true,
+          getRootNode: scope.getRootNode,
+          layerStyleTargets: [() => dom.getPositionerEl(scope)],
           onInteractOutside(event) {
             prop("onInteractOutside")?.(event);
             if (event.defaultPrevented) return;
@@ -379,8 +382,8 @@ var machine = createMachine({
           },
           onPointerDownOutside: prop("onPointerDownOutside"),
           onFocusOutside: prop("onFocusOutside"),
-          onDismiss() {
-            send({ type: "INTERACT_OUTSIDE" });
+          onDismiss(event) {
+            send({ type: "INTERACT_OUTSIDE", focusVisible: event?.type === "keydown" });
           }
         });
       },
@@ -571,9 +574,12 @@ var machine = createMachine({
           element.focus({ preventScroll: true });
         });
       },
-      setReturnFocus({ scope }) {
+      setReturnFocus({ scope, event }) {
+        const contentEl = dom.getContentEl(scope);
+        const focusOptions = getReturnFocusOptions(event);
         raf(() => {
-          dom.getTriggerEl(scope)?.focus({ preventScroll: true });
+          if (isFocusOutside(scope.getActiveElement(), [contentEl])) return;
+          dom.getTriggerEl(scope)?.focus(focusOptions);
         });
       },
       syncFormatSelectElement({ context, scope }) {
@@ -613,6 +619,10 @@ function syncFormatSelect(scope, format) {
   if (!selectEl) return;
   raf(() => setElementValue(selectEl, format));
 }
+function getReturnFocusOptions(event) {
+  const focusVisible = event.focusVisible ?? event.previousEvent?.focusVisible;
+  return focusVisible ? { preventScroll: true, focusVisible: true } : { preventScroll: true };
+}
 export {
   machine
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.45.0",
+  "version": "1.47.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,14 +30,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "1.45.0",
-    "@zag-js/anatomy": "1.45.0",
-    "@zag-js/dom-query": "1.45.0",
-    "@zag-js/dismissable": "1.45.0",
-    "@zag-js/utils": "1.45.0",
-    "@zag-js/color-utils": "1.45.0",
-    "@zag-js/popper": "1.45.0",
-    "@zag-js/types": "1.45.0"
+    "@zag-js/core": "1.47.0",
+    "@zag-js/anatomy": "1.47.0",
+    "@zag-js/dom-query": "1.47.0",
+    "@zag-js/dismissable": "1.47.0",
+    "@zag-js/utils": "1.47.0",
+    "@zag-js/color-utils": "1.47.0",
+    "@zag-js/popper": "1.47.0",
+    "@zag-js/types": "1.47.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"