v4.3.0

reshaped

Minor Changes

• #700 138845e Thanks @blvdmitry! - Badge.Container: Badge now cuts a transparent gap around itself out of the content it's positioned against, so it stands out on top of images and colored backgrounds

• #697 3344cc3 Thanks @blvdmitry! - Calendar now renders today's date in bold and marks it with aria-current="date"

• #691 2068cb6 Thanks @blvdmitry! - ContextMenu: onOpen now receives the native contextmenu event that opened the menu as { event }. A single ContextMenu rendered over many items, for example with triggerRef pointing at a table, can now find the item that was right clicked with event.target without adding its own contextmenu listener.

• #704 8ff0310 Thanks @blvdmitry! - Moved the dark mode elevation-raised and elevation-overlay background colors closer to elevation-base, so overlay components like Modal and Popover no longer look washed out on top of the page. Regenerate custom themes to pick up the new values

• #675 d9770c5 Thanks @blvdmitry! - Restored the Flyout hide animation by default for Select, DropdownMenu and Autocomplete. Flyout content is now frozen while animating out, so it keeps its last rendered state even when the component updates on close, for example when Select changes its selected value. disableHideAnimation is still supported to opt out of the animation. Content that's animating out no longer reacts to pointer events, content closed right after opening no longer stays mounted, and focus now returns to the trigger when the content is closed without an animation, for example with reduced motion enabled.

• #698 bc9a4f2 Thanks @blvdmitry! - MenuItem: Added focusIndicator property to choose between the default outline keyboard focus ring and a highlight style matching the hover state. DropdownMenu.Item now always uses highlight.

• #670 cf7ac31 Thanks @blvdmitry! - Improved the Modal swipe gesture physics. On release, the closing or returning animation now continues from the current velocity of the gesture using a critically damped spring, so a quick flick closes the modal right away while a slow release settles smoothly, instead of restarting a fixed-duration transition from zero. Returning to the open position is animated as well, where previously it snapped back, and starting a new swipe while the modal is still animating picks it up from its current position instead of snapping to the position the animation was heading to.

• #704 8ff0310 Thanks @blvdmitry! - Modal with bottom, start and end positions now follows the swipe gesture past its open position with a damped rubber band effect and springs back on release. Content scrolling in that direction still takes priority over the gesture

• #704 8ff0310 Thanks @blvdmitry! - Modal with bottom position now adds the browser safe area insets to its padding on the sides attached to the screen edges, so the content isn't covered by the device corners or the home indicator in apps added to the home screen. The insets only apply when the page uses viewport-fit=cover and are ignored for contained modals

• #704 8ff0310 Thanks @blvdmitry! - Modal with start and end positions now floats with an offset from the screen edges and rounds all its corners. The offset grows to the browser safe area insets when they're larger, and more space is left for the overlay on the side far from the screen edge. All modals except full-screen now render a neutral faded border, bottom only renders it on the top side

• #701 10b7cbd Thanks @blvdmitry! - Tooltip no longer opens when its trigger is tapped on touch devices. Tapping usually runs the trigger action, so the tooltip stayed open behind it, for example behind the overlay of a Modal opened by the trigger. Tooltips still open on hover and keyboard focus, and you can show them on touch by controlling them with the active prop. Added a disableTouchTrigger prop to Flyout to ignore touch interactions with hover triggers.

Patch Changes

• #706 b69f1eb Thanks @blvdmitry! - Badge.Container: Fixed the cutout around the badge not rendering outside of React strict mode

• #694 55cda7f Thanks @shkomg! - Button with icon and endIcon and no children now keeps --rs-button-gap between the two icons

• #682 c12f6a7 Thanks @blvdmitry! - Switch: Added role="switch" to the input element so it's announced as a switch instead of a checkbox. Checkbox, Radio, HiddenInput: onChange is now called when the component is used without a name, and disabled from a group or the component itself can no longer be overridden by FormControl disabled={false}.

• #678 4d8b937 Thanks @blvdmitry! - ContextMenu: Fixed the open menu staying on the screen when right clicking another ContextMenu trigger, only the new menu is shown now. Right clicking the trigger of the open menu again moves the menu to the new position.

• #699 1bc5e32 Thanks @blvdmitry! - ContextMenu: Disabled the hide animation by default to match the native context menu behavior, the menu now closes instantly. Pass disableHideAnimation={false} to bring the animation back.

• #680 de2c249 Thanks @blvdmitry! - Expandable now uses an accelerating easing when closing, so the content collapses over the whole duration instead of disappearing in the first frames

• #684 6e02315 Thanks @blvdmitry! - Flyout: Fixed the content role for hover flyouts with an explicit trapFocusMode, so DropdownMenu submenus now use the menu role and hover Popover content is no longer announced as a tooltip. Pressing Escape now closes nested hover and focus flyouts one by one, starting from the latest opened one, instead of closing all of them at once. Popover.Dismissible now passes the close-button reason to onClose. Autocomplete: the highlighted option is scrolled into view when navigating with the keyboard. MenuItem: hovering a menu item removes the highlight from the focused one, so only one item is highlighted at a time.

• #695 5f567cb Thanks @blvdmitry! - Fixed other Flyout triggers staying unclickable after a hover flyout, for example a Tooltip, was unmounted while open. Opening a hover flyout disables pointer events on the other open triggers while the mouse moves to its content, and they were only restored when the flyout closed through its own close handler. They are now also restored when the flyout unmounts while open or gets hidden with the active or disabled props, so a Popover or DropdownMenu trigger no longer stops responding after clicking a button with a tooltip that removes itself.

• #681 f1bd3d7 Thanks @blvdmitry! - FormControl: Fixed the accessibility wiring between FormControl and the form fields. FormControl.Helper is no longer announced as an alert and FormControl.Error is announced politely. aria-describedby is updated when the captions unmount and isn't rendered when there are no captions. useFormControl attributes now include aria-invalid and aria-required based on hasError and required. With group, the attributes are empty and the captions describe the fieldset instead, so every field inside the group can spread them safely. Checkbox, Radio and Slider are now linked to FormControl.Label and the captions when used without a group, Slider inputs are no longer labelled by their thumb value, TextField icons focus the field when used inside FormControl, and PinField now supports the FormControl disabled and hasError states and hides its visual characters from assistive technologies.

• #676 6150f4f Thanks @mahirhir! - Fixed useHotkeys reacting to keys that belong to an IME composition. With a Japanese, Chinese or Korean input method, the Enter that confirms a conversion no longer triggers hotkeys, so Autocomplete no longer selects the highlighted option or calls onEnter with unfinished text.

• #696 d64a630 Thanks @blvdmitry! - Fixed Image with outline and aspectRatio growing to the image's natural height in Safari, which made an Avatar with a large src render as a tall pill inside a centered Modal. The outline wrapper now lays out the image as a flex item instead of relying on height: 100%, which WebKit doesn't resolve against an aspect-ratio height. Root attributes and sizing styles are also no longer duplicated on the image element inside the outline wrapper, so id, ref and event handlers passed in attributes only apply to the root element.

• #669 9c58807 Thanks @blvdmitry! - Improved the Modal swipe-to-close performance on mobile. The drag offset custom property is now registered as non-inherited, so updating it on every frame of the gesture only recalculates the style of the modal root instead of every element of the modal content.

• #704 8ff0310 Thanks @blvdmitry! - Modal with bottom position now renders a strip with its background fixed to the bottom edge of the screen while it's open. iOS Safari doesn't render the modal under its floating toolbar and fills the toolbar area with the color of the fixed elements attached to the screen edge instead, so the modal now visually continues under the toolbar instead of showing the page behind it

• #703 2715250 Thanks @blvdmitry! - Modal with start and end positions now supports swipe-to-close when its content is scrolled vertically, and horizontally scrollable areas inside it take priority over the swipe only while they can still scroll in the swipe direction. The gesture direction is resolved after the first few pixels, so vertical scrolling never moves the modal and swiping never scrolls the content, for all positions

• #683 6f4019f Thanks @blvdmitry! - NumberField: Fixed the increase and decrease controls not being disabled when the value, min or max is 0, typed text being replaced while typing values like -0.5, and press-and-hold controls continuing to change the value after the pointer is cancelled or the component unmounts. The input now uses the decimal mobile keyboard when step is fractional or min is negative. ProgressBar: Fixed the progress value calculation when min is not 0. Slider: Keyboard navigation no longer moves a range thumb past the other one. PinField: Pasted values containing whitespace are no longer rejected.

• #690 0756cbf Thanks @blvdmitry! - useOnClickOutside no longer adds document listeners while disabled, which speeds up mounting many components using it, like editable items in long lists

• #667 3d94de2 Thanks @blvdmitry! - Improved the Overlay animation performance by rendering its backdrop as a separate layer with a static color and transitioning only its opacity. Previously the full-viewport root transitioned background-color on open and close and during the Modal drag-to-close gesture, which forced the browser to repaint the whole viewport on every frame on the main thread. The transition now runs entirely on the compositor thread while keeping the same visual result.

• #686 33532fe Thanks @blvdmitry! - Overlay: Replaced the button role of the root element with presentation, since clicking outside the content is a pointer shortcut and keyboard users close it with Escape. Modal: Fixed the swipe to close gesture direction for start and end positions in RTL. Portal: Fixed the content rendered inside a shadow root moving to document.body after re-rendering.

• #668 3c21d21 Thanks @blvdmitry! - Improved the ScrollArea scrolling performance. The custom scrollbar thumb now follows the scroll position with a transform instead of inset, so the scroll-linked updates run on the compositor thread without triggering layout and paint, and the scroll position is written directly to a css variable instead of re-rendering the component on every scroll event. This also fixes the horizontal thumb moving outside of the scrollbar track when scrolling in RTL.

• #685 5cc5e96 Thanks @blvdmitry! - Select: Fixed the custom Select accessibility semantics. The content now uses the listbox role with aria-multiselectable for multiple selection, and the trigger uses aria-haspopup="listbox". When used inside FormControl, the trigger is labelled by FormControl.Label and described by its captions. Selecting an option with multiple no longer closes the content.

• #708 de2a1da Thanks @blvdmitry! - Tabs: Fixed Tabs.List not becoming scrollable when its available width or content width changes without a window resize

• #689 21e0bc7 Thanks @blvdmitry! - Fixed useRTL creating its own RTL state for every component that calls it. It now reads the Reshaped provider state, so only the provider observes and updates the dir attribute and setRTL changes the direction for the whole app.

• Updated dependencies [8ff0310, 8ff0310]:

  • @reshaped/theming@4.3.0
  • @reshaped/utilities@4.3.0

@reshaped/theming

Minor Changes

• #704 8ff0310 Thanks @blvdmitry! - Moved the dark mode elevation-raised and elevation-overlay background colors closer to elevation-base, so overlay components like Modal and Popover no longer look washed out on top of the page. Regenerate custom themes to pick up the new values

@reshaped/utilities

Patch Changes

• #704 8ff0310 Thanks @blvdmitry! - lockScroll on iOS now locks the document scroll with overflow: hidden on the element that scrolls the page, instead of moving body to a fixed position. Fixing the body collapsed the document height, which made Safari lose its translucent toolbars while a Modal or other overlay was open, and the scroll position no longer has to be restored when unlocking. Unlocking the scroll on other platforms now also restores the original inline padding-right and scrollbar-gutter of the scroll container instead of clearing them