@zag-js/color-picker 0.53.0 → 0.55.0

package/src/color-picker.connect.ts

@@ -91,85 +91,97 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       send({ type: "VALUE.SET", value: color, src: "set-alpha" })
     },
 
-    rootProps: normalize.element({
-      ...parts.root.attrs,
-      dir: state.context.dir,
-      id: dom.getRootId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      style: {
-        "--value": value.toString("css"),
-      },
-    }),
-
-    labelProps: normalize.element({
-      ...parts.label.attrs,
-      dir: state.context.dir,
-      id: dom.getLabelId(state.context),
-      htmlFor: dom.getHiddenInputId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "data-focus": dataAttr(focused),
-      onClick(event) {
-        event.preventDefault()
-        const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]")
-        inputEl?.focus({ preventScroll: true })
-      },
-    }),
-
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      id: dom.getControlId(state.context),
-      dir: state.context.dir,
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "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: disabled,
-      "aria-label": `select color. current color is ${valueAsString}`,
-      "aria-controls": dom.getContentId(state.context),
-      "aria-labelledby": dom.getLabelId(state.context),
-      "data-disabled": dataAttr(disabled),
-      "data-readonly": dataAttr(state.context.readOnly),
-      "data-placement": currentPlacement,
-      "aria-expanded": dataAttr(open),
-      "data-state": open ? "open" : "closed",
-      "data-focus": dataAttr(focused),
-      type: "button",
-      onClick() {
-        if (!interactive) return
-        send({ type: "TRIGGER.CLICK" })
-      },
-      onBlur() {
-        if (!interactive) return
-        send({ type: "TRIGGER.BLUR" })
-      },
-      style: {
-        position: "relative",
-      },
-    }),
-
-    positionerProps: normalize.element({
-      ...parts.positioner.attrs,
-      id: dom.getPositionerId(state.context),
-      dir: state.context.dir,
-      style: popperStyles.floating,
-    }),
-
-    contentProps: normalize.element({
-      ...parts.content.attrs,
-      id: dom.getContentId(state.context),
-      dir: state.context.dir,
-      "data-placement": currentPlacement,
-      "data-state": open ? "open" : "closed",
-      hidden: !open,
-    }),
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: state.context.dir,
+        id: dom.getRootId(state.context),
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
+        style: {
+          "--value": value.toString("css"),
+        },
+      })
+    },
+
+    getLabelProps() {
+      return normalize.element({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        id: dom.getLabelId(state.context),
+        htmlFor: dom.getHiddenInputId(state.context),
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
+        "data-focus": dataAttr(focused),
+        onClick(event) {
+          event.preventDefault()
+          const inputEl = query(dom.getControlEl(state.context), "[data-channel=hex]")
+          inputEl?.focus({ preventScroll: true })
+        },
+      })
+    },
+
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        id: dom.getControlId(state.context),
+        dir: state.context.dir,
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
+        "data-state": open ? "open" : "closed",
+        "data-focus": dataAttr(focused),
+      })
+    },
+
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        id: dom.getTriggerId(state.context),
+        dir: state.context.dir,
+        disabled: disabled,
+        "aria-label": `select color. current color is ${valueAsString}`,
+        "aria-controls": dom.getContentId(state.context),
+        "aria-labelledby": dom.getLabelId(state.context),
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
+        "data-placement": currentPlacement,
+        "aria-expanded": dataAttr(open),
+        "data-state": open ? "open" : "closed",
+        "data-focus": dataAttr(focused),
+        type: "button",
+        onClick() {
+          if (!interactive) return
+          send({ type: "TRIGGER.CLICK" })
+        },
+        onBlur() {
+          if (!interactive) return
+          send({ type: "TRIGGER.BLUR" })
+        },
+        style: {
+          position: "relative",
+        },
+      })
+    },
+
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        id: dom.getPositionerId(state.context),
+        dir: state.context.dir,
+        style: popperStyles.floating,
+      })
+    },
+
+    getContentProps() {
+      return normalize.element({
+        ...parts.content.attrs,
+        id: dom.getContentId(state.context),
+        dir: state.context.dir,
+        "data-placement": currentPlacement,
+        "data-state": open ? "open" : "closed",
+        hidden: !open,
+      })
+    },
 
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props)
@@ -501,49 +513,55 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    hiddenInputProps: normalize.input({
-      type: "text",
-      disabled: disabled,
-      name: state.context.name,
-      id: dom.getHiddenInputId(state.context),
-      style: visuallyHiddenStyle,
-      defaultValue: valueAsString,
-    }),
-
-    eyeDropperTriggerProps: normalize.button({
-      ...parts.eyeDropperTrigger.attrs,
-      type: "button",
-      dir: state.context.dir,
-      disabled: disabled,
-      "data-disabled": dataAttr(disabled),
-      "aria-label": "Pick a color from the screen",
-      onClick() {
-        if (!interactive) return
-        send("EYEDROPPER.CLICK")
-      },
-    }),
-
-    swatchGroupProps: normalize.element({
-      ...parts.swatchGroup.attrs,
-      role: "group",
-    }),
+    getHiddenInputProps() {
+      return normalize.input({
+        type: "text",
+        disabled: disabled,
+        name: state.context.name,
+        id: dom.getHiddenInputId(state.context),
+        style: visuallyHiddenStyle,
+        defaultValue: valueAsString,
+      })
+    },
+
+    getEyeDropperTriggerProps() {
+      return normalize.button({
+        ...parts.eyeDropperTrigger.attrs,
+        type: "button",
+        dir: state.context.dir,
+        disabled: disabled,
+        "data-disabled": dataAttr(disabled),
+        "aria-label": "Pick a color from the screen",
+        onClick() {
+          if (!interactive) return
+          send("EYEDROPPER.CLICK")
+        },
+      })
+    },
+
+    getSwatchGroupProps() {
+      return normalize.element({
+        ...parts.swatchGroup.attrs,
+        role: "group",
+      })
+    },
 
     getSwatchTriggerState,
 
     getSwatchTriggerProps(props) {
-      const triggerState = getSwatchTriggerState(props)
+      const swatchState = getSwatchTriggerState(props)
       return normalize.button({
         ...parts.swatchTrigger.attrs,
-        disabled: triggerState.disabled,
+        disabled: swatchState.disabled,
         dir: state.context.dir,
         type: "button",
-        "aria-label": `select ${triggerState.valueAsString} as the color`,
-        "data-state": triggerState.checked ? "checked" : "unchecked",
-        "data-value": triggerState.valueAsString,
-        "data-disabled": dataAttr(triggerState.disabled),
+        "aria-label": `select ${swatchState.valueAsString} as the color`,
+        "data-state": swatchState.checked ? "checked" : "unchecked",
+        "data-value": swatchState.valueAsString,
+        "data-disabled": dataAttr(swatchState.disabled),
         onClick() {
-          if (triggerState.disabled) return
-          send({ type: "SWATCH_TRIGGER.CLICK", value: triggerState.value })
+          if (swatchState.disabled) return
+          send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value })
         },
         style: {
           position: "relative",
@@ -552,52 +570,56 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     },
 
     getSwatchIndicatorProps(props) {
-      const triggerState = getSwatchTriggerState(props)
+      const swatchState = getSwatchTriggerState(props)
       return normalize.element({
         ...parts.swatchIndicator.attrs,
         dir: state.context.dir,
-        hidden: !triggerState.checked,
+        hidden: !swatchState.checked,
       })
     },
 
     getSwatchProps(props) {
       const { respectAlpha = true } = props
-      const triggerState = getSwatchTriggerState(props)
+      const swatchState = getSwatchTriggerState(props)
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
-        "data-state": triggerState.checked ? "checked" : "unchecked",
-        "data-value": triggerState.valueAsString,
+        "data-state": swatchState.checked ? "checked" : "unchecked",
+        "data-value": swatchState.valueAsString,
         style: {
           position: "relative",
-          background: triggerState.value.toString(respectAlpha ? "css" : "hex"),
+          background: swatchState.value.toString(respectAlpha ? "css" : "hex"),
         },
       })
     },
 
-    formatTriggerProps: normalize.button({
-      ...parts.formatTrigger.attrs,
-      dir: state.context.dir,
-      type: "button",
-      "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
-      onClick(event) {
-        if (event.currentTarget.disabled) return
-        const nextFormat = getNextFormat(state.context.format)
-        send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" })
-      },
-    }),
-
-    formatSelectProps: normalize.select({
-      ...parts.formatSelect.attrs,
-      "aria-label": "change color format",
-      dir: state.context.dir,
-      defaultValue: state.context.format,
-      disabled: disabled,
-      onChange(event) {
-        const format = assertFormat(event.currentTarget.value)
-        send({ type: "FORMAT.SET", format, src: "format-select" })
-      },
-    }),
+    getFormatTriggerProps() {
+      return normalize.button({
+        ...parts.formatTrigger.attrs,
+        dir: state.context.dir,
+        type: "button",
+        "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
+        onClick(event) {
+          if (event.currentTarget.disabled) return
+          const nextFormat = getNextFormat(state.context.format)
+          send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" })
+        },
+      })
+    },
+
+    getFormatSelectProps() {
+      return normalize.select({
+        ...parts.formatSelect.attrs,
+        "aria-label": "change color format",
+        dir: state.context.dir,
+        defaultValue: state.context.format,
+        disabled: disabled,
+        onChange(event) {
+          const format = assertFormat(event.currentTarget.value)
+          send({ type: "FORMAT.SET", format, src: "format-select" })
+        },
+      })
+    },
   }
 }
 

package/src/color-picker.types.ts

@@ -296,13 +296,13 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    */
   setOpen(open: boolean): void
 
-  rootProps: T["element"]
-  labelProps: T["element"]
-  controlProps: T["element"]
-  triggerProps: T["button"]
-  positionerProps: T["element"]
-  contentProps: T["element"]
-  hiddenInputProps: T["input"]
+  getRootProps(): T["element"]
+  getLabelProps(): T["element"]
+  getControlProps(): T["element"]
+  getTriggerProps(): T["button"]
+  getPositionerProps(): T["element"]
+  getContentProps(): T["element"]
+  getHiddenInputProps(): T["input"]
 
   getAreaProps(props?: AreaProps): T["element"]
   getAreaBackgroundProps(props?: AreaProps): T["element"]
@@ -315,16 +315,16 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
 
   getTransparencyGridProps(props?: TransparencyGridProps): T["element"]
 
-  eyeDropperTriggerProps: T["button"]
+  getEyeDropperTriggerProps(): T["button"]
 
-  swatchGroupProps: T["element"]
+  getSwatchGroupProps(): T["element"]
   getSwatchTriggerProps(props: SwatchTriggerProps): T["button"]
   getSwatchTriggerState(props: SwatchTriggerProps): SwatchTriggerState
   getSwatchProps(props: SwatchProps): T["element"]
   getSwatchIndicatorProps(props: SwatchProps): T["element"]
 
-  formatSelectProps: T["select"]
-  formatTriggerProps: T["button"]
+  getFormatSelectProps(): T["select"]
+  getFormatTriggerProps(): T["button"]
 }
 
 /* -----------------------------------------------------------------------------