Major Changes
-
#3342
d6089c3Thanks
@github-actions! - - Breaking: ReplacedisableLayerwithinline. An
inline combobox is always open, isn't positioned or dismissable, and doesn't callonOpenChange. The content gets
data-inline.combobox.machine({ - open: true, - disableLayer: true, + inline: true, })-
Fix a highlight set with
setHighlightedValueright after the collection changes moving to the first item. -
Fix keyboard navigation not scrolling the highlighted item into view when an inline combobox's input mounts late,
such as inside a dialog.
-
-
#3342
08ea850Thanks
@github-actions! - Zag no longer sets az-indexon overlays. Set it in
CSS, using--layer-indexfor the overlay's place in the stack.-
Fix a
z-indexset on the positioner in CSS being overridden. -
Fix overlays dropping behind other layers while they animate out.
--layer-indexstays set after close.
Breaking: Move the
z-indexto the positioner (or the backdrop) and add--layer-index.- [data-popover-content] { + [data-popover-positioner] { - z-index: 1400; + z-index: calc(1400 + var(--layer-index)); }
-
Popover, menu, select, combobox, hover card, tooltip, date picker, color picker and cascade select no longer copy
the content'sz-indexonto the positioner or set--z-index. -
Dialog and drawer no longer set
--z-index. Use--layer-indexon the backdrop and positioner. -
The floating panel no longer sets a
z-index. Style the positioner as above to bring the focused panel to the
front. -
The tour no longer copies the content's
z-indexonto dialog steps. Style the positioner with--tour-layer. -
The toast group no longer sets an inline
z-index. Set it on[data-toast-group]in CSS. -
Remove the
zIndexandzIndexFallbackoptions fromgetDismissableLayerStyle.
-
-
#3342
12f18abThanks
@github-actions! - - Add a filter input and an empty state to menu and
select withpopupType: "dialog". You filter the items; the input keeps focus while the arrow keys move the
highlight.<div {...api.getContentProps()}> <input {...api.getInputProps()} /> <div {...api.getEmptyProps()}>{items.length === 0 && "No results"}</div> <div {...api.getListProps()}>{/* items */}</div> </div>
-
Add
getEmptyProps()to combobox and listbox. It's a polite live region, so keep it rendered and toggle its text. -
Fix a lazily mounted popup inside nested dialogs rendering behind the dialog.
Breaking: Set the highlight with
setHighlightedValuein every list component, and passnullto clear it.- api.setHighlightValue("react") // select, combobox, cascade select - api.highlightValue("react") // listbox + api.setHighlightedValue("react") - api.clearHighlightValue() + api.setHighlightedValue(null)
Breaking (menu): Replace
compositewithpopupType, matching select and combobox.- menu.machine({ composite: false }) + menu.machine({ popupType: "dialog" })
-
Menu: Add
autoHighlightto highlight the first item as the query changes. A submenu can have its own input;
Escape,Shift+TaborArrowLefton an empty input returns to the parent's.onHighlightChangereports a
reason. -
Select:
HomeandEndjump to the first or last item when the input is empty, andalignItemWithTrigger
keeps the selected item of a long list next to the trigger.
-
Minor Changes
- #3342
4f28f36Thanks
@github-actions! - - AddreasontoonValueChangedetails, such as
trigger-click,keyboard,drag,item-selectorscript. Each component exports itsValueChangeReasontype.
Slider also adds it toonValueChangeEnd.
Patch Changes
- #3342
730ea29Thanks
@github-actions! - - Fix focus, scroll and sync work scheduled for the next
frame running after the component unmounts. - Updated dependencies [
d6089c3,
a87b07c,
cb8e73d,
a80b307,
4f28f36,
08ea850]:- @zag-js/collection@2.0.0-next.4
- @zag-js/dismissable@2.0.0-next.4
- @zag-js/dom-query@2.0.0-next.4
- @zag-js/popper@2.0.0-next.4
- @zag-js/core@2.0.0-next.4
- @zag-js/focus-visible@2.0.0-next.4
- @zag-js/anatomy@2.0.0-next.4
- @zag-js/types@2.0.0-next.4
- @zag-js/utils@2.0.0-next.4
- @zag-js/live-region@2.0.0-next.4