v0.203.0

Minor Changes

• #1598 baa133d04 Thanks @tenphi! - Inputs take a controlWidth prop: the control's own width. It sizes the element width sizes when the input renders bare, in every label position, so beside a side label it sizes the control alone, fixed ('100px'), capped ('max 30x') or following its value up to a cap ('initial max-content 30x'), however long the label is. width stays the space the whole field takes, label included. controlWidth wins over width on a bare input and over styles.width, wrapperStyles.width on the date and time pickers and inputStyles.width on FileInput, and a state map on it resolves against the control. Replace a styles={{ width }} that sizes a control beside its label with controlWidth. Slider's inputWidth prop, which nothing read, is removed.

• #1595 60e1d920f Thanks @tenphi! - Add ordered section headers to flat ItemTable lists, such as Favorites and Other items. Sections share the table's columns and scrolling, keep records sorted within each section, omit empty groups and preserve record-only pagination, selection and keyboard navigation, including virtualized tables.

• #1598 baa133d04 Thanks @tenphi! - TextInput, SearchInput, PasswordInput, NumberInput, TextArea and CommandTextArea take shape="plain": a square field box with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width, so nothing shifts, and shows in the default field's colours on focus, in a valid or invalid state and in high contrast. NumberInput's step buttons square their corners with it. Use it in place of styles={{ border: false, radius: false }}, which also hid the focus border. The default, shape="default", is unchanged.

Patch Changes

• #1599 c19dcb9bd Thanks @tenphi! - Fix ComboBox without allowsCustomValue ignoring the typed text on Enter while the list is closed, as after Escape or with popoverTrigger="manual". Enter now settles the text the way leaving the input does before a surrounding form submits: it selects the option the text names exactly, or the only one it matches, unless that option is disabled, and otherwise shows the selection again (or clears it with clearOnBlur). Before, the form submitted the old value, or none, while the input still showed the typed text. Enter and leaving the input now match the text against every option, so after the arrow keys or the chevron open the list with every option on text that matches none, leaving the input no longer selects a lone option the text doesn't match, and Enter clears the selection as for any text that matches nothing.

• #1597 127ad98c5 Thanks @tenphi! - ComboBox and NumberInput with a name now submit their value in a native <form>, as TextInput and Select do. A hidden input carries ComboBox's selected key (its typed text with allowsCustomValue) and NumberInput's number, not the text either input shows. A disabled field submits nothing. In tests, user-event submits on Enter without a submit button only when the form holds a single <input>, and it counts the hidden one, so such a form whose only field is one of these needs a submit button; browsers still submit it.

• #1598 baa133d04 Thanks @tenphi! - Tabs can be themed with the caller's own tokens. It now forwards its tokens prop, which it dropped before, and its tabs read current tokens: #surface-text-soft for a title, #primary-accent-text for the active title of a default or narrow tab, and #primary-accent-surface for the selection indicator. Re-declare those through tabListStyles, styles or tokens, and $font-sans for the title font, as described under Theming in the Tabs docs. Overriding the legacy aliases #dark-02, #primary-text and #primary on a Tabs or its ancestors no longer recolors its tabs.