Skip to content

v0.195.0

Choose a tag to compare

@tenphi tenphi released this 16 Oct 10:55
· 35 commits to main since this release
c43bcf5

Minor Changes

  • #1523 27d221cd Thanks @tenphi! - A dialog opened with useAlertDialogAPI() now belongs to the component that called the hook and closes, as a cancel, when that component unmounts, so its callbacks no longer run against a component that is gone. onCancel runs and the promise rejects with undefined, as for an aborted cancelToken. A call to open after the unmount settles as a cancel without opening. Call the hook in a component that stays mounted while the dialog is open: a dialog opened by a menu item that unmounts when the menu closes now closes with it, so call the hook in the component that renders the menu. When the unmount or an aborted cancelToken comes while a confirm or secondary action is running, the action now finishes first: the dialog closes with its result, or as a cancel if it fails.

  • #1523 27d221cd Thanks @tenphi! - A field without a label now shows its description, errorMessage and message instead of dropping them, and links them to the input, so a screen reader says why it is invalid. A label-less field bound to a form (with a name, or as the child of a legacy Form.Item) gets the same field wrapper, so its validation errors show under it. SearchInput and SearchComboBox now show their texts too. Passing one of these props is enough, whatever it holds at the moment (errorMessage={error} with error still undefined or null), so the input keeps its place and its focus when the message comes and goes. The field is then laid out by its wrapper, as a labelled one is: layout props such as flexGrow, width or gridArea stay on the input, so move them to fieldStyles. For an inline field, the new isBare prop keeps the bare control: its texts are not shown, and the control keeps its invalid state. Without a label, a description now goes under the input even with a side or split labelPosition, rather than in the empty label column. forceField is deprecated: such fields no longer need it. It still forces the wrapper and warns once in development; remove it.

Patch Changes

  • #1523 27d221cd Thanks @tenphi! - Checkbox and Switch fixes. A standalone Checkbox now gets the hovered mod, and a grouped one now puts its state mods (checked, disabled, invalid, hovered, …) on its wrapper, so styles keyed on them work in both. A string label no longer replaces the inline text or your aria-label in a Checkbox's accessible name: <Checkbox label="Notifications">Send me emails</Checkbox> is named "Notifications Send me emails", as a Switch already was. A Checkbox in a group no longer copies its id, aria-* and data-* props onto its wrapper, so #id, <label for> and aria-labelledby reach the input; both a standalone and a grouped one now pass className, style, qaVal and your own mods to the wrapper. A Switch label now wraps instead of staying on one line. A Checkbox or Switch named only by a field label no longer logs React Aria's missing aria-label warning.

  • #1515 68d2508f Thanks @tenphi! - Layout.Pane with flexShrink={1} now resizes correctly when other panes in the same flex container also give way. The edge follows the pointer and moves exactly 10px per arrow key (50px with Shift) instead of losing part of each move to the panes beside it, and the pane stays where it is dropped. The room comes from the panes after the edge, down to their minSize, where the resize stops; the panes before the edge keep their size. A pane that gives way keeps the size it was left at and reports it through onSizeChange. Beside such panes, a resize that ends where it began, such as an arrow key pressed at the stop, leaves every pane as it was and reports nothing. A drag only across a pane's grip, or a key across it outside a drag, no longer reports a size change.

  • #1523 27d221cd Thanks @tenphi! - A form-bound Checkbox or Switch keeps the value you give it. It used to render value="true" or value="false" as soon as the field had a value, so a native <Form action> submission and FormData read the boolean instead of value="yes"; without a value, a checked one now submits the browser default on. The same change stops a custom control built on useFieldProps from receiving the field value as value when its valuePropsMapper maps it to another prop.