chakra-ui/zag @zag-js/hover-card@2.0.0-next.4 on GitHub

Major Changes

#3342
d6089c3 Thanks
@github-actions! - - Add a viewport part to animate switching between
triggers. Render a content per trigger with getContentProps({ value }) and getContentValues().
- Add data-activation-direction and api.activationDirection, and data-transitioning on the positioner and
  viewport while switching triggers.
- Add data-instant to the content when focus opens the card or Escape closes it, so the animation can be skipped.
- Fix a card opened without hovering its trigger, such as with defaultOpen, closing when the pointer passes over it.
- Fix a card or menu opened from inside the card closing it.
- Fix onOpenChange reporting a close twice when a controlled card is dismissed during a pending hover close.
- Fix the card reopening when the window regains focus, and staying open when its trigger is removed.
- Breaking: Report a hover close with the trigger-hover reason, the same as a hover open. The pointer-leave
  reason is removed.
```
// before
onOpenChange({ open, reason }) {
  if (reason === "pointer-leave") {}
}

// after
onOpenChange({ open, reason }) {
  if (!open && reason === "trigger-hover") {}
}
```
#3342
08ea850 Thanks
@github-actions! - Zag no longer sets a z-index on overlays. Set it in
CSS, using --layer-index for the overlay's place in the stack.
- Fix a z-index set on the positioner in CSS being overridden.
- Fix overlays dropping behind other layers while they animate out. --layer-index stays set after close.
Breaking: Move the z-index to 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's z-index onto the positioner or set --z-index.
- Dialog and drawer no longer set --z-index. Use --layer-index on 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-index onto 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 zIndex and zIndexFallback options from getDismissableLayerStyle.

Patch Changes

#3342
12f18ab Thanks
@github-actions! - - Add a filter input and an empty state to menu and
select with popupType: "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 setHighlightedValue in every list component, and pass null to clear it.
```
- api.setHighlightValue("react") // select, combobox, cascade select
- api.highlightValue("react") // listbox
+ api.setHighlightedValue("react")

- api.clearHighlightValue()
+ api.setHighlightedValue(null)
```
Breaking (menu): Replace composite with popupType, matching select and combobox.
```
- menu.machine({ composite: false })
+ menu.machine({ popupType: "dialog" })
```
- Menu: Add autoHighlight to highlight the first item as the query changes. A submenu can have its own input;
  Escape, Shift+Tab or ArrowLeft on an empty input returns to the parent's. onHighlightChange reports a
  reason.
- Select: Home and End jump to the first or last item when the input is empty, and alignItemWithTrigger
  keeps the selected item of a long list next to the trigger.
Updated dependencies [a87b07c,
cb8e73d,
a80b307,
4f28f36,
08ea850]:
- @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/safe-area@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