github chakra-ui/zag @zag-js/toast@2.0.0-next.4

latest release: @zag-js/tour@2.0.0-next.4
pre-releaseone hour ago

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
    d6089c3 Thanks
    @github-actions! - - Breaking: Add the content part. Wrap the toast's
    content in it, so its height keeps updating after mount.

      <div {...api.getRootProps()}>
    -   <h3 {...api.getTitleProps()}>{api.title}</h3>
    -   <p {...api.getDescriptionProps()}>{api.description}</p>
    +   <div {...api.getContentProps()}>
    +     <h3 {...api.getTitleProps()}>{api.title}</h3>
    +     <p {...api.getDescriptionProps()}>{api.description}</p>
    +   </div>
      </div>
    • Add swipe to dismiss, toward the nearest edges of the placement. Set swipeDirections on the store or a toast, or
      [] to turn it off. Turn transitions off while swiping:

      [data-toast-root][data-swiping] {
        transition: none;
      }
    • Add data-swiping, data-swipe-direction, --swipe-x and --swipe-y to the root.

    • Fix a progress bar driven by --duration jumping after a pause. --duration is now the total duration, not the
      time remaining.

Patch Changes

  • #3342
    730ea29 Thanks
    @github-actions! - - Fix focus, scroll and sync work scheduled for the next
    frame running after the component unmounts.
  • 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/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

Don't miss a new zag release

NewReleases is sending notifications on new releases.