@zag-js/color-picker 1.39.1 → 1.41.0

package/dist/color-picker.connect.js

@@ -64,6 +64,7 @@ function connect(service, normalize) {
     };
   };
   const currentPlacement = context.get("currentPlacement");
+  const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
     placement: currentPlacement
@@ -169,6 +170,7 @@ function connect(service, normalize) {
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         "aria-expanded": open,
         "data-state": open ? "open" : "closed",
         "data-focus": (0, import_dom_query2.dataAttr)(focused),
@@ -202,6 +204,7 @@ function connect(service, normalize) {
         role: prop("inline") ? void 0 : "dialog",
         tabIndex: -1,
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         "data-state": open ? "open" : "closed",
         hidden: !open
       });

package/dist/color-picker.connect.mjs

@@ -2,7 +2,7 @@
 import { getColorAreaGradient, normalizeColor } from "@zag-js/color-utils";
 import { getEventKey, getEventPoint, getEventStep, isLeftClick, isModifierKey } from "@zag-js/dom-query";
 import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
-import { getPlacementStyles } from "@zag-js/popper";
+import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./color-picker.anatomy.mjs";
 import * as dom from "./color-picker.dom.mjs";
 import { getChannelDisplayColor } from "./utils/get-channel-display-color.mjs";
@@ -30,6 +30,7 @@ function connect(service, normalize) {
     };
   };
   const currentPlacement = context.get("currentPlacement");
+  const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
     placement: currentPlacement
@@ -135,6 +136,7 @@ function connect(service, normalize) {
         "data-readonly": dataAttr(readOnly),
         "data-invalid": dataAttr(invalid),
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         "aria-expanded": open,
         "data-state": open ? "open" : "closed",
         "data-focus": dataAttr(focused),
@@ -168,6 +170,7 @@ function connect(service, normalize) {
         role: prop("inline") ? void 0 : "dialog",
         tabIndex: -1,
         "data-placement": currentPlacement,
+        "data-side": currentPlacementSide,
         "data-state": open ? "open" : "closed",
         hidden: !open
       });

package/dist/color-picker.machine.js

@@ -72,8 +72,8 @@ var machine = (0, import_core.createMachine)({
   context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
-        defaultValue: prop("defaultValue"),
-        value: prop("value"),
+        defaultValue: prop("defaultValue").toFormat(prop("format") ?? prop("defaultFormat")),
+        value: prop("value")?.toFormat(prop("format") ?? prop("defaultFormat")),
         isEqual(a, b) {
           return b != null && a.isEqual(b);
         },
@@ -441,7 +441,7 @@ var machine = (0, import_core.createMachine)({
       }
     },
     actions: {
-      openEyeDropper({ scope, context }) {
+      openEyeDropper({ scope, context, prop }) {
         const win = scope.getWin();
         const isSupported = "EyeDropper" in win;
         if (!isSupported) return;
@@ -450,6 +450,12 @@ var machine = (0, import_core.createMachine)({
           const format = context.get("value").getFormat();
           const color = (0, import_color_utils.parseColor)(sRGBHex).toFormat(format);
           context.set("value", color);
+          return color;
+        }).then((value) => {
+          prop("onValueChangeEnd")?.({
+            value,
+            valueAsString: value.toString(context.get("format"))
+          });
         }).catch(() => void 0);
       },
       setActiveChannel({ context, event }) {
@@ -484,7 +490,8 @@ var machine = (0, import_core.createMachine)({
         context.set("value", color);
       },
       setValue({ context, event }) {
-        context.set("value", event.value);
+        const format = context.get("format");
+        context.set("value", event.value.toFormat(format));
       },
       setFormat({ context, event }) {
         context.set("format", event.format);

package/dist/color-picker.machine.mjs

@@ -46,8 +46,8 @@ var machine = createMachine({
   context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
-        defaultValue: prop("defaultValue"),
-        value: prop("value"),
+        defaultValue: prop("defaultValue").toFormat(prop("format") ?? prop("defaultFormat")),
+        value: prop("value")?.toFormat(prop("format") ?? prop("defaultFormat")),
         isEqual(a, b) {
           return b != null && a.isEqual(b);
         },
@@ -415,7 +415,7 @@ var machine = createMachine({
       }
     },
     actions: {
-      openEyeDropper({ scope, context }) {
+      openEyeDropper({ scope, context, prop }) {
         const win = scope.getWin();
         const isSupported = "EyeDropper" in win;
         if (!isSupported) return;
@@ -424,6 +424,12 @@ var machine = createMachine({
           const format = context.get("value").getFormat();
           const color = parseColor(sRGBHex).toFormat(format);
           context.set("value", color);
+          return color;
+        }).then((value) => {
+          prop("onValueChangeEnd")?.({
+            value,
+            valueAsString: value.toString(context.get("format"))
+          });
         }).catch(() => void 0);
       },
       setActiveChannel({ context, event }) {
@@ -458,7 +464,8 @@ var machine = createMachine({
         context.set("value", color);
       },
       setValue({ context, event }) {
-        context.set("value", event.value);
+        const format = context.get("format");
+        context.set("value", event.value.toFormat(format));
       },
       setFormat({ context, event }) {
         context.set("format", event.format);

package/package.json

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