@zag-js/color-picker 0.46.0 → 0.48.0

package/dist/index.mjs

@@ -33,11 +33,10 @@ import {
   getEventStep,
   getNativeEvent,
   isLeftClick,
-  isModifiedEvent
+  isModifierKey
 } from "@zag-js/dom-event";
-import { dataAttr, query } from "@zag-js/dom-query";
+import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementStyles } from "@zag-js/popper";
-import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 
 // src/color-picker.dom.ts
 import { getRelativePoint } from "@zag-js/dom-event";
@@ -228,11 +227,11 @@ function connect(state, send, normalize) {
   const value = state.context.value;
   const areaValue = state.context.areaValue;
   const valueAsString = state.context.valueAsString;
-  const isDisabled = state.context.isDisabled;
-  const isInteractive = state.context.isInteractive;
-  const isDragging = state.hasTag("dragging");
-  const isOpen = state.hasTag("open");
-  const isFocused = state.hasTag("focused");
+  const disabled = state.context.isDisabled;
+  const interactive = state.context.isInteractive;
+  const dragging = state.hasTag("dragging");
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
   const getAreaChannels = (props) => {
     const channels = areaValue.getChannels();
     return {
@@ -250,20 +249,19 @@ function connect(state, send, normalize) {
     return {
       value: color,
       valueAsString: color.toString("hex"),
-      isChecked: color.isEqual(value),
-      isDisabled: props.disabled || !isInteractive
+      checked: color.isEqual(value),
+      disabled: props.disabled || !interactive
     };
   }
   return {
-    isDragging,
-    isOpen,
+    dragging,
+    open,
     valueAsString,
     value,
-    open() {
-      send({ type: "OPEN" });
-    },
-    close() {
-      send({ type: "CLOSE" });
+    setOpen(_open) {
+      if (_open === open)
+        return;
+      send({ type: _open ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
@@ -289,7 +287,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       "data-readonly": dataAttr(state.context.readOnly),
       style: {
         "--value": value.toString("css")
@@ -300,9 +298,9 @@ function connect(state, send, normalize) {
       dir: state.context.dir,
       id: dom.getLabelId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       "data-readonly": dataAttr(state.context.readOnly),
-      "data-focus": dataAttr(isFocused),
+      "data-focus": dataAttr(focused),
       onClick(event) {
         event.preventDefault();
         const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]");
@@ -313,33 +311,33 @@ function connect(state, send, normalize) {
       ...parts.control.attrs,
       id: dom.getControlId(state.context),
       dir: state.context.dir,
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       "data-readonly": dataAttr(state.context.readOnly),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": dataAttr(isFocused)
+      "data-state": open ? "open" : "closed",
+      "data-focus": dataAttr(focused)
     }),
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
       id: dom.getTriggerId(state.context),
       dir: state.context.dir,
-      disabled: isDisabled,
+      disabled,
       "aria-label": `select color. current color is ${valueAsString}`,
       "aria-controls": dom.getContentId(state.context),
       "aria-labelledby": dom.getLabelId(state.context),
-      "data-disabled": dataAttr(isDisabled),
+      "data-disabled": dataAttr(disabled),
       "data-readonly": dataAttr(state.context.readOnly),
       "data-placement": currentPlacement,
-      "aria-expanded": dataAttr(isOpen),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": dataAttr(isFocused),
+      "aria-expanded": dataAttr(open),
+      "data-state": open ? "open" : "closed",
+      "data-focus": dataAttr(focused),
       type: "button",
       onClick() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send({ type: "TRIGGER.CLICK" });
       },
       onBlur() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send({ type: "TRIGGER.BLUR" });
       },
@@ -358,8 +356,8 @@ function connect(state, send, normalize) {
       id: dom.getContentId(state.context),
       dir: state.context.dir,
       "data-placement": currentPlacement,
-      "data-state": isOpen ? "open" : "closed",
-      hidden: !isOpen
+      "data-state": open ? "open" : "closed",
+      hidden: !open
     }),
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
@@ -373,10 +371,10 @@ function connect(state, send, normalize) {
         id: dom.getAreaId(state.context),
         role: "group",
         onPointerDown(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const evt = getNativeEvent(event);
-          if (!isLeftClick(evt) || isModifiedEvent(evt))
+          if (!isLeftClick(evt) || isModifierKey(evt))
             return;
           const point = getEventPoint(evt);
           const channel = { xChannel, yChannel };
@@ -420,8 +418,8 @@ function connect(state, send, normalize) {
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
-        tabIndex: isDisabled ? void 0 : 0,
-        "data-disabled": dataAttr(isDisabled),
+        tabIndex: disabled ? void 0 : 0,
+        "data-disabled": dataAttr(disabled),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -439,12 +437,14 @@ function connect(state, send, normalize) {
           background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           const step = getEventStep(event);
           const keyMap = {
@@ -504,10 +504,10 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         role: "presentation",
         onPointerDown(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const evt = getNativeEvent(event);
-          if (!isLeftClick(evt) || isModifiedEvent(evt))
+          if (!isLeftClick(evt) || isModifierKey(evt))
             return;
           const point = getEventPoint(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
@@ -550,11 +550,11 @@ function connect(state, send, normalize) {
         id: dom.getChannelSliderThumbId(state.context, channel),
         role: "slider",
         "aria-label": channel,
-        tabIndex: isDisabled ? void 0 : 0,
+        tabIndex: disabled ? void 0 : 0,
         "data-channel": channel,
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": dataAttr(disabled),
         "data-orientation": orientation,
-        "aria-disabled": dataAttr(isDisabled),
+        "aria-disabled": dataAttr(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": maxValue,
         "aria-valuemin": minValue,
@@ -567,12 +567,14 @@ function connect(state, send, normalize) {
           ...placementStyles
         },
         onFocus() {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           const step = getEventStep(event) * stepValue;
           const keyMap = {
@@ -624,15 +626,15 @@ function connect(state, send, normalize) {
         "aria-label": channel,
         spellCheck: false,
         autoComplete: "off",
-        disabled: isDisabled,
-        "data-disabled": dataAttr(isDisabled),
+        disabled,
+        "data-disabled": dataAttr(disabled),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
         min: range?.minValue,
         max: range?.maxValue,
         step: range?.step,
         onBeforeInput(event) {
-          if (isTextField || !isInteractive)
+          if (isTextField || !interactive)
             return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
@@ -640,19 +642,21 @@ function connect(state, send, normalize) {
           }
         },
         onFocus(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
-          if (!isInteractive)
+          if (!interactive)
             return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (!isInteractive)
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
             return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
@@ -669,7 +673,7 @@ function connect(state, send, normalize) {
     },
     hiddenInputProps: normalize.input({
       type: "text",
-      disabled: isDisabled,
+      disabled,
       name: state.context.name,
       id: dom.getHiddenInputId(state.context),
       style: visuallyHiddenStyle,
@@ -679,11 +683,11 @@ function connect(state, send, normalize) {
       ...parts.eyeDropperTrigger.attrs,
       type: "button",
       dir: state.context.dir,
-      disabled: isDisabled,
-      "data-disabled": dataAttr(isDisabled),
+      disabled,
+      "data-disabled": dataAttr(disabled),
       "aria-label": "Pick a color from the screen",
       onClick() {
-        if (!isInteractive)
+        if (!interactive)
           return;
         send("EYEDROPPER.CLICK");
       }
@@ -697,15 +701,15 @@ function connect(state, send, normalize) {
       const triggerState = getSwatchTriggerState(props);
       return normalize.button({
         ...parts.swatchTrigger.attrs,
-        disabled: triggerState.isDisabled,
+        disabled: triggerState.disabled,
         dir: state.context.dir,
         type: "button",
         "aria-label": `select ${triggerState.valueAsString} as the color`,
-        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-state": triggerState.checked ? "checked" : "unchecked",
         "data-value": triggerState.valueAsString,
-        "data-disabled": dataAttr(triggerState.isDisabled),
+        "data-disabled": dataAttr(triggerState.disabled),
         onClick() {
-          if (triggerState.isDisabled)
+          if (triggerState.disabled)
             return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value });
         },
@@ -719,7 +723,7 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.swatchIndicator.attrs,
         dir: state.context.dir,
-        hidden: !triggerState.isChecked
+        hidden: !triggerState.checked
       });
     },
     getSwatchProps(props) {
@@ -728,7 +732,7 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
-        "data-state": triggerState.isChecked ? "checked" : "unchecked",
+        "data-state": triggerState.checked ? "checked" : "unchecked",
         "data-value": triggerState.valueAsString,
         style: {
           position: "relative",
@@ -753,7 +757,7 @@ function connect(state, send, normalize) {
       "aria-label": "change color format",
       dir: state.context.dir,
       defaultValue: state.context.format,
-      disabled: isDisabled,
+      disabled,
       onChange(event) {
         const format = assertFormat(event.currentTarget.value);
         send({ type: "FORMAT.SET", format, src: "format-select" });