chakra-ui/zag @zag-js/date-picker@2.0.0-next.4 on GitHub

Major Changes

#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.

#3342
1e1f6da Thanks
@github-actions! - Breaking: Spell out "Prev" as "Previous" across the
API.

The prevTrigger part is now previousTrigger in carousel, date picker, pagination, scheduler and steps, including
its prop getter, data attribute, ids key and translation key.

- <button {...api.getPrevTriggerProps()} />
+ <button {...api.getPreviousTriggerProps()} />

- [data-carousel-prev-trigger] { ... }
+ [data-carousel-previous-trigger] { ... }

  carousel.machine({
-   ids: { prevTrigger: "prev" },
-   translations: { prevTrigger: "Previous slide" },
+   ids: { previousTrigger: "prev" },
+   translations: { previousTrigger: "Previous slide" },
  })

Pagination and scheduler rename translations.prevTriggerLabel to translations.previousTriggerLabel.

Component	Before	After
Carousel	`scrollPrev()`, `canScrollPrev`	`scrollPrevious()`, `canScrollPrevious`
Date picker, Scheduler	`goToPrev()`	`goToPrevious()`
Pagination	`goToPrevPage()`	`goToPreviousPage()`
Steps	`goToPrevStep()`, `hasPrevStep`	`goToPreviousStep()`, `hasPreviousStep`
Tabs	`selectPrev()`	`selectPrevious()`
Tour	`prev()`, `hasPrevStep`	`previous()`, `hasPreviousStep`

The tour's "prev" action is now "previous", and its trigger renders data-type="previous".

- actions: [{ label: "Prev", action: "prev" }],
+ actions: [{ label: "Previous", action: "previous" }],
- action: (actions) => actions.prev()
+ action: (actions) => actions.previous()
- translations: { prevStep: "Previous step" }
+ translations: { previousStep: "Previous step" }

Minor Changes

#3342
4f28f36 Thanks
@github-actions! - - Add reason to onOpenChange details, such as
trigger-click, escape-key, interact-outside, item-select or script. Each component exports its
OpenChangeReason type.
- Add an optional reason to api.setOpen(open, reason), defaulting to script.

Patch Changes

#3342
730ea29 Thanks
@github-actions! - - Fix focus, scroll and sync work scheduled for the next
frame running after the component unmounts.
#3342
d6089c3 Thanks
@github-actions! - - Fix a preset closing the picker without calling
onOpenChange, and an inline or closed picker calling it.
#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,
12f18ab]:
- @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/date-utils@2.0.0-next.4
- @zag-js/core@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