Skip to content

Commit

Permalink
refactor: combobox, select, menu, tabs (chakra-ui#1431)
Browse files Browse the repository at this point in the history
* chore: wip

* fix: typecheck

* fix: website

* refactor: ux refactor of combobox and related components

* fix: self target

* refactor: menu

* chore: update menu

* chore: update

* docs: add combobox change log

* chore: update

* docs: add typedocs

* fix: website search

* refactor: combobox

* fix: e2e

* refactor: loop -> loopFocus

* fix: e2e

* fix: typecheck and playground

* fix: typecheck

* fix: typecheck

* docs: add changeset

* chore: export and update changeset
  • Loading branch information
segunadebayo authored and colinlienard committed Jun 18, 2024
1 parent a8038c4 commit e6a7740
Show file tree
Hide file tree
Showing 116 changed files with 2,593 additions and 1,247 deletions.
37 changes: 37 additions & 0 deletions .changeset/fluffy-cups-argue.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
"@zag-js/combobox": minor
---

- Add `open` and `open.controlled` property to programmatically control the combobox's open state

- Add new `openOnChange` property to automatically open the combobox when the value changes. Value can be a boolean or a
function that returns a boolean.

```jsx
const [state, send] = useMachine(
combobox.machine({
// openOnChange: true,
openOnChange: ({ inputValue }) => inputValue.length > 2,
}),
)
```

- Add new `openOnKeypress` property to automatically open the combobox when the arrow keys (up and down) are pressed.

- Add `getSelectionValue` to the combobox's context to allow customizing the input value when an item is selected.

```jsx
const [state, send] = useMachine(
combobox.machine({
getSelectionValue({ inputValue, valueAsString }) {
return `${inputValue} ${valueAsString}`
},
}),
)
```

- Add new `dismissable` property to determine whether to add the combobox content to the dismissable stack.

- Add `popup` attribute to allow rendering the combobox has a select with input within the content.

- Add `persistFocus` to the item props to determine whether to clear the highlighted item on pointer leave.
6 changes: 6 additions & 0 deletions .changeset/four-snakes-wonder.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@zag-js/tags-input": minor
---

- Rename `allowTagEdit` to `editable`
- Add `onInputValueChange` to machine context
5 changes: 5 additions & 0 deletions .changeset/odd-rabbits-mate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zag-js/dialog": minor
---

Rename `closeOnEscapeKeyDown` to `closeOnEscape`
5 changes: 5 additions & 0 deletions .changeset/pretty-schools-grab.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zag-js/menu": minor
---

Focus first tabbable element when menu opens. To allow composition with combobox
8 changes: 8 additions & 0 deletions .changeset/pretty-tips-juggle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@zag-js/combobox": minor
"@zag-js/select": minor
"@zag-js/menu": minor
"@zag-js/tabs": minor
---

Rename `loop` to `loopFocus` to better reflect its purpose
5 changes: 5 additions & 0 deletions .changeset/sixty-ants-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zag-js/select": minor
---

Remove `selectOnBlur` to prevent accidental selection of options. Prefer explicit selection by user via click or enter key.
9 changes: 9 additions & 0 deletions .changeset/tough-owls-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@zag-js/combobox": minor
---

- Fix issue where combobox could be composed with tags-input due to the way `selectedItems` and `valueAsString` was
computed
- Remove `selectOnBlur` to prevent accidental selection of options. Prefer explicit selection by user via click or enter
key.
- Update the details provided by `onInputValueChange` to from `details.value` to `details.inputValue`
Loading

0 comments on commit e6a7740

Please sign in to comment.