Release Notes Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline under the drawn bell, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the version, the word and the text you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

afterOf(since) takes the releases newer than the one you are on, and rowsFor lists their changes, grouped under each release's number and date. The counts on the chips and the count line come from the same releases, so they never disagree with the list. In your app the version you are on is the one you are running, read when the page loads, and the releases come from your changelog.

A select that opens a popup inside a dialog fights the dialog's focus trap and its scrim, on some libraries more than others. The native one is the same on every library, works with the keyboard and the touch picker of every phone, and is named for screen readers ("The version you are on"). Changing it says how many changes there are since the version you picked.

With the word Breaking after its text, in bold, never a colour; the count line counts them for what is listed ("2 breaking"), so filtering by word or typing changes it. Two of the fourteen changes since 4.0 break something in this demo.

Yes. Type to search, the arrow keys move through the changes, Enter opens the highlighted one and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The select and the chips are above the input, in the tab order. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The select takes the full width above the chips, which scroll sideways. The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.