forked from chakra-ui/zag
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: combobox, select, menu, tabs (chakra-ui#1431)
* 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
1 parent
a8038c4
commit e6a7740
Showing
116 changed files
with
2,593 additions
and
1,247 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@zag-js/dialog": minor | ||
--- | ||
|
||
Rename `closeOnEscapeKeyDown` to `closeOnEscape` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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` |
Oops, something went wrong.