fix: color picker in dialog

Author: segunadebayo

.changeset/upset-facts-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/color-picker": patch
+---
+
+Fix issue where clicking whitespace around content could cause it to close

packages/machines/color-picker/src/color-picker.connect.ts

@@ -184,6 +184,7 @@ export function connect<T extends PropTypes>(
         ...parts.content.attrs,
         id: dom.getContentId(scope),
         dir: prop("dir"),
+        tabIndex: -1,
         "data-placement": currentPlacement,
         "data-state": open ? "open" : "closed",
         hidden: !open,

packages/machines/radio-group/src/radio-group.connect.ts

@@ -15,6 +15,7 @@ export function connect<T extends PropTypes>(
 
   function getItemState(props: ItemProps): ItemState {
     return {
+      value: props.value,
       invalid: !!props.invalid,
       disabled: !!props.disabled || groupDisabled,
       checked: context.get("value") === props.value,
@@ -25,30 +26,23 @@ export function connect<T extends PropTypes>(
   }
 
   function getItemDataAttrs<T extends ItemProps>(props: T) {
-    const radioState = getItemState(props)
+    const itemState = getItemState(props)
     return {
-      "data-focus": dataAttr(radioState.focused),
-      "data-focus-visible": dataAttr(radioState.focused && context.get("focusVisible")),
-      "data-disabled": dataAttr(radioState.disabled),
+      "data-focus": dataAttr(itemState.focused),
+      "data-focus-visible": dataAttr(itemState.focused && context.get("focusVisible")),
+      "data-disabled": dataAttr(itemState.disabled),
       "data-readonly": dataAttr(readOnly),
-      "data-state": radioState.checked ? "checked" : "unchecked",
-      "data-hover": dataAttr(radioState.hovered),
-      "data-invalid": dataAttr(radioState.invalid),
+      "data-state": itemState.checked ? "checked" : "unchecked",
+      "data-hover": dataAttr(itemState.hovered),
+      "data-invalid": dataAttr(itemState.invalid),
       "data-orientation": prop("orientation"),
       "data-ssr": dataAttr(context.get("ssr")),
     }
   }
 
   const focus = () => {
-    const firstEnabledAndCheckedInput = dom.getFirstEnabledAndCheckedInputEl(scope)
-
-    if (firstEnabledAndCheckedInput) {
-      firstEnabledAndCheckedInput.focus()
-      return
-    }
-
-    const firstEnabledInput = dom.getFirstEnabledInputEl(scope)
-    firstEnabledInput?.focus()
+    const nodeToFocus = dom.getFirstEnabledAndCheckedInputEl(scope) ?? dom.getFirstEnabledInputEl(scope)
+    nodeToFocus?.focus()
   }
 
   return {
@@ -139,20 +133,20 @@ export function connect<T extends PropTypes>(
     },
 
     getItemControlProps(props) {
-      const controlState = getItemState(props)
+      const itemState = getItemState(props)
 
       return normalize.element({
         ...parts.itemControl.attrs,
         dir: prop("dir"),
         id: dom.getItemControlId(scope, props.value),
-        "data-active": dataAttr(controlState.active),
+        "data-active": dataAttr(itemState.active),
         "aria-hidden": true,
         ...getItemDataAttrs(props),
       })
     },
 
     getItemHiddenInputProps(props) {
-      const inputState = getItemState(props)
+      const itemState = getItemState(props)
 
       return normalize.input({
         "data-ownedby": dom.getRootId(scope),
@@ -190,8 +184,8 @@ export function connect<T extends PropTypes>(
             send({ type: "SET_ACTIVE", value: null })
           }
         },
-        disabled: inputState.disabled,
-        defaultChecked: inputState.checked,
+        disabled: itemState.disabled,
+        defaultChecked: itemState.checked,
         style: visuallyHiddenStyle,
       })
     },

packages/machines/radio-group/src/radio-group.types.ts

@@ -150,27 +150,31 @@ export interface ItemProps {
 
 export interface ItemState {
   /**
-   * Whether the radio is invalid
+   * The value of the item
+   */
+  value: string
+  /**
+   * Whether the item is invalid
    */
   invalid: boolean
   /**
-   * Whether the radio is disabled
+   * Whether the item is disabled
    */
   disabled: boolean
   /**
-   * Whether the radio is checked
+   * Whether the item is checked
    */
   checked: boolean
   /**
-   *  Whether the radio is focused
+   *  Whether the item is focused
    */
   focused: boolean
   /**
-   * Whether the radio is hovered
+   * Whether the item is hovered
    */
   hovered: boolean
   /**
-   * Whether the radio is active or pressed
+   * Whether the item is active or pressed
    */
   active: boolean
 }