refactor: redesign select and combobox (#826)

chakra-ui · Sep 5, 2023 · 224cbbb · 224cbbb · vercel · Sep 5, 2023
1 parent 8676fec
commit 224cbbb
Show file tree

Hide file tree

Showing 75 changed files with 3,124 additions and 1,926 deletions.
diff --git a/.changeset/large-books-own.md b/.changeset/large-books-own.md
@@ -1,8 +1,5 @@
 ---
 "@zag-js/combobox": patch
-"@zag-js/dom-event": patch
-"@zag-js/shared": patch
-"website": patch
 ---
 
 Add support for `closeOnSelect`
diff --git a/.changeset/thick-forks-hope.md b/.changeset/thick-forks-hope.md
@@ -0,0 +1,33 @@
+---
+"@zag-js/select": minor
+"@zag-js/combobox": minor
+"@zag-js/utils": minor
+---
+
+> Breaking Changes 💥
+
+Redesign select and combobox API to allow passing value as `string` and `collection`
+
+Prior to this change, Zag computes the label and value from the DOM element. While this worked, it makes it challenging
+to manage complex objects that don't match the `label` and `value` convention.
+
+```jsx
+// Create the collection
+const collection = select.collection({
+  items: [],
+  itemToString(item) {
+    return item.label
+  },
+  itemToValue(item) {
+    return item.value
+  },
+})
+
+// Pass the collection to the select machine
+const [state, send] = useMachine(
+  select.machine({
+    collection,
+    id: useId(),
+  }),
+)
+```