@zag-js/color-picker 1.0.1 → 1.0.2

package/dist/index.js

@@ -835,7 +835,7 @@ var machine = core.createMachine({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
@@ -850,7 +850,6 @@ var machine = core.createMachine({
           const ctx = getContext();
           const valueAsString = value.toString(ctx.get("format"));
           prop("onValueChange")?.({ value, valueAsString });
-          domQuery.dispatchInputValueEvent(getHiddenInputEl(scope), { value: valueAsString });
         }
       })),
       format: bindable(() => ({
@@ -883,7 +882,7 @@ var machine = core.createMachine({
   effects: ["trackFormControl"],
   watch({ prop, context, action, track }) {
     track([() => context.hash("value")], () => {
-      action(["syncInputElements"]);
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
       action(["syncFormatSelectElement"]);
@@ -1280,8 +1279,11 @@ var machine = core.createMachine({
       setFormat({ context, event }) {
         context.set("format", event.format);
       },
+      dispatchChangeEvent({ scope, computed }) {
+        domQuery.dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+      },
       syncInputElements({ context, scope }) {
-        syncInputs(scope, context.get("value"));
+        syncChannelInputs(scope, context.get("value"));
       },
       invokeOnChangeEnd({ context, prop, computed }) {
         prop("onValueChangeEnd")?.({
@@ -1307,7 +1309,7 @@ var machine = core.createMachine({
           const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
           color = current.withChannelValue(channel, valueAsNumber);
         }
-        syncInputs(scope, context.get("value"), color);
+        syncChannelInputs(scope, context.get("value"), color);
         context.set("value", color);
       },
       incrementChannel({ context, event }) {
@@ -1390,7 +1392,7 @@ var machine = core.createMachine({
     }
   }
 });
-function syncInputs(scope, currentValue, nextValue) {
+function syncChannelInputs(scope, currentValue, nextValue) {
   const channelInputEls = getChannelInputEls(scope);
   domQuery.raf(() => {
     channelInputEls.forEach((inputEl) => {

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { parseColor, normalizeColor, getColorAreaGradient } from '@zag-js/color-utils';
-import { dispatchInputValueEvent, trackFormControl, trackPointerMove, disableTextSelection, raf, getInitialFocus, setElementValue, getRelativePoint, queryAll, dataAttr, query, isLeftClick, isModifierKey, getEventPoint, getEventStep, getEventKey, visuallyHiddenStyle } from '@zag-js/dom-query';
+import { trackFormControl, trackPointerMove, disableTextSelection, dispatchInputValueEvent, raf, getInitialFocus, setElementValue, getRelativePoint, queryAll, dataAttr, query, isLeftClick, isModifierKey, getEventPoint, getEventStep, getEventKey, visuallyHiddenStyle } from '@zag-js/dom-query';
 import { getPlacement, getPlacementStyles } from '@zag-js/popper';
 import { createGuards, createMachine } from '@zag-js/core';
 import { trackDismissableElement } from '@zag-js/dismissable';
@@ -833,7 +833,7 @@ var machine = createMachine({
     const open = prop("open") || prop("defaultOpen");
     return open ? "open" : "idle";
   },
-  context({ prop, bindable, getContext, scope }) {
+  context({ prop, bindable, getContext }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
@@ -848,7 +848,6 @@ var machine = createMachine({
           const ctx = getContext();
           const valueAsString = value.toString(ctx.get("format"));
           prop("onValueChange")?.({ value, valueAsString });
-          dispatchInputValueEvent(getHiddenInputEl(scope), { value: valueAsString });
         }
       })),
       format: bindable(() => ({
@@ -881,7 +880,7 @@ var machine = createMachine({
   effects: ["trackFormControl"],
   watch({ prop, context, action, track }) {
     track([() => context.hash("value")], () => {
-      action(["syncInputElements"]);
+      action(["syncInputElements", "dispatchChangeEvent"]);
     });
     track([() => context.get("format")], () => {
       action(["syncFormatSelectElement"]);
@@ -1278,8 +1277,11 @@ var machine = createMachine({
       setFormat({ context, event }) {
         context.set("format", event.format);
       },
+      dispatchChangeEvent({ scope, computed }) {
+        dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+      },
       syncInputElements({ context, scope }) {
-        syncInputs(scope, context.get("value"));
+        syncChannelInputs(scope, context.get("value"));
       },
       invokeOnChangeEnd({ context, prop, computed }) {
         prop("onValueChangeEnd")?.({
@@ -1305,7 +1307,7 @@ var machine = createMachine({
           const valueAsNumber = Number.isNaN(value) ? current.getChannelValue(channel) : value;
           color = current.withChannelValue(channel, valueAsNumber);
         }
-        syncInputs(scope, context.get("value"), color);
+        syncChannelInputs(scope, context.get("value"), color);
         context.set("value", color);
       },
       incrementChannel({ context, event }) {
@@ -1388,7 +1390,7 @@ var machine = createMachine({
     }
   }
 });
-function syncInputs(scope, currentValue, nextValue) {
+function syncChannelInputs(scope, currentValue, nextValue) {
   const channelInputEls = getChannelInputEls(scope);
   raf(() => {
     channelInputEls.forEach((inputEl) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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.0.1",
-    "@zag-js/anatomy": "1.0.1",
-    "@zag-js/dom-query": "1.0.1",
-    "@zag-js/dismissable": "1.0.1",
-    "@zag-js/utils": "1.0.1",
-    "@zag-js/color-utils": "1.0.1",
-    "@zag-js/popper": "1.0.1",
-    "@zag-js/types": "1.0.1"
+    "@zag-js/core": "1.0.2",
+    "@zag-js/anatomy": "1.0.2",
+    "@zag-js/dom-query": "1.0.2",
+    "@zag-js/dismissable": "1.0.2",
+    "@zag-js/utils": "1.0.2",
+    "@zag-js/color-utils": "1.0.2",
+    "@zag-js/popper": "1.0.2",
+    "@zag-js/types": "1.0.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"