Whats New Dialog

ProNew

Use this when a release has a few changes worth a look: a dialog with a short fading slideshow of updates and a "Do not show this again" checkbox that is reported when it closes.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

title

defaultOpen

Guide and examples

When to use it

Use it after an update to point out up to four changes, once, with a way to say "do not show this again".

Do not use it for the full changelog or for anything people must act on. Link to release notes and use a banner for required actions.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`updates`	`Update[]`	`-`	Each has an id, tag, title, text and a visual node.
`title`	`string`	`What is new`	Dialog title.
`defaultOpen`	`boolean`	`true`	Whether the dialog starts open.
`onDismiss`	`(result: { dontShowAgain: boolean }) => void`	`-`	Called when the dialog closes.

Accessibility

A modal dialog with a title and description: focus is trapped, Escape closes it and focus returns to what had it before.
The checkbox has a visible label and its value is reported when the dialog closes by any route.
The slideshow does not move by itself; each update is announced politely when it changes.
Keyboard: Left / Right: previous or next update
Keyboard: Escape: close

Testing

The pattern ships with a Testing Library test (whats-new-dialog.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.