Operator Chip Search Navbar Block for React

from: and to: take a name and match it as a part of the sender or the recipient, so from:ana also finds Hana. has:attachment keeps the messages with a file, and is:unread and is:starred filter by state. Any other text is a text chip that matches the subject or the sender. Chips combine: a message must match all of them. A half-written operator is refused with a line in the panel, for example "from: needs a name, like from:ana.", a repeated chip is refused, and the field holds five chips.

Nothing leaves the page. The count ("8 of 20") is worked out in the browser from the MAIL array at the top of the file, and the number on Inbox is the unread messages in that array. Replace the array, or call your search from the chip handler, to make it real. The sample is example data.

The field is a text input named Search mail inside a search landmark. Enter and comma commit a chip, and Backspace on an empty field first marks the last chip and then removes it. Each chip has its own delete button, and the field has a Clear all button once there is a chip. Focus opens the operator panel, Escape closes it and puts focus back in the field, and the buttons in the panel add a chip or write the operator into the field. A polite line announces each change ("Added from:ana. 3 of 20 messages match."), and it speaks only when something changes.

Below md the links and the field leave the bar. A search icon opens a sheet from the top with the same field, the operators as plain buttons, the count, and the folders. A dot on the icon and its name ("Search mail, 2 filters") show that chips are set. The chips are shared with the bar, so resizing keeps them. Compose becomes an icon, and its name stays for screen readers. Escape closes the sheet and returns focus to the search icon.

Compose is a link to #. Point its href at your composer. The Shine Button renders the link with render, with nativeButton={false}.

Nothing moves on load. The operator panel fades in over 150 ms and links change colour; both are instant with reduced motion. A band of light sweeps across Compose once on hover and keyboard focus, and with reduced motion that light fades in where it stands.