fix: expose data-state on item-text for combobox and select (#1621)

chakra-ui · Jun 26, 2024 · 1f7ea87 · 1f7ea87
1 parent 29051fd
commit 1f7ea87
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/seven-buttons-drum.md b/.changeset/seven-buttons-drum.md
@@ -0,0 +1,7 @@
+---
+"@zag-js/combobox": patch
+"@zag-js/select": patch
+"@zag-js/docs": patch
+---
+
+Expose data-state on ItemText for Combobox and Select
diff --git a/packages/docs/data/data-attr.json b/packages/docs/data/data-attr.json
@@ -319,6 +319,7 @@
     "ItemText": {
       "data-scope": "combobox",
       "data-part": "item-text",
+      "data-state": "\"checked\" | \"unchecked\"",
       "data-disabled": "Present when disabled",
       "data-highlighted": "Present when highlighted"
     },
@@ -907,6 +908,7 @@
     "ItemText": {
       "data-scope": "select",
       "data-part": "item-text",
+      "data-state": "\"checked\" | \"unchecked\"",
       "data-disabled": "Present when disabled",
       "data-highlighted": "Present when highlighted"
     },

diff --git a/packages/machines/combobox/src/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts
@@ -390,6 +390,7 @@ export function connect<T extends PropTypes, V extends CollectionItem>(
       return normalize.element({
         ...parts.itemText.attrs,
         dir: state.context.dir,
+        "data-state": itemState.selected ? "checked" : "unchecked",
         "data-disabled": dataAttr(itemState.disabled),
         "data-highlighted": dataAttr(itemState.highlighted),
       })

diff --git a/packages/machines/select/src/select.connect.ts b/packages/machines/select/src/select.connect.ts
@@ -281,6 +281,7 @@ export function connect<T extends PropTypes, V extends CollectionItem = Collecti
       const itemState = getItemState(props)
       return normalize.element({
         ...parts.itemText.attrs,
+        "data-state": itemState.selected ? "checked" : "unchecked",
         "data-disabled": dataAttr(itemState.disabled),
         "data-highlighted": dataAttr(itemState.highlighted),
       })