v3.2.7

React Aria upgrade: HeroUI bumps react-aria-components to 1.22.1 (react-aria@3.53.1). The new Sheet component provides a swipeable overlay with four placements, snap points, nested sheets, controlled state, bounded detached layouts, and coordinated dragging, scrolling, and handle-driven dismissal. Slider adds composable step indicators and mark labels for horizontal, vertical, single-value, and range controls, while components reduce rendering overhead. Accessibility improvements add decorative Separator support, preserve dialog naming in date-picker popovers, remove invalid landmark and group attributes, and improve Storybook example semantics. This release also keeps reopened overlays visible and fixes Slider RTL fills, Switch thumb jitter, Tabs indicator drift during hydration, cancelled Drawer drags, stale ScrollShadow edges, narrow-screen menus, autofilled fields, and Toast layouts.

InstallationCopy Anchor Link

Update to the latest version:

npm i @heroui/styles@latest @heroui/react@latest

DependenciesCopy Anchor Link

• React Aria: Upgrade to React Aria 1.22.1 — react-aria-components@1.22.1, react-aria@3.53.1, react-stately@3.51.0, @react-types/shared@3.37.0, and @internationalized/number@3.6.9 (#6939, #6949).
• Avatar primitive: Upgrade @radix-ui/react-avatar to 1.3.1 (#6979).
• Security: Patch open Dependabot alerts in transitive dependencies (#6938).

What's NewCopy Anchor Link

• Sheet: Add a swipeable React Aria overlay with bottom, top, left, and right placements; pixel, CSS-length, and percentage snap points; sequential snapping; backdrop variants; detached and non-dismissable modes; controlled state; nested sheets; and coordinated panel dragging, body scrolling, and handle-driven dismissal. Detached sheets keep every snap point within the viewport across all placements. The compound API includes trigger, backdrop, content, dialog, handle, header, body, footer, and close parts (#6974, fba503c, #6979).
• Slider steps and marks: Compose Slider.Steps inside Slider.Track to show decorative dots for each configured increment, then add Slider.Marks and Slider.Mark after the track for labels at arbitrary values. Steps and marks support fractional values, vertical orientation, RTL, disabled state, single-value and range sliders, localized default labels, and data-filled styling hooks (#6965).

Bug FixesCopy Anchor Link

• CloseButton: Stop hardcoding aria-label="Close" on the React Aria Button. Explicit aria-label props and slot context labels (toast close, search field clear, tag remove) are no longer overridden (#6946).
• Toast: Collapse the bottom-region anchor on iOS Safari so stacked toasts sit flush with the safe area (#6936). Replace useMediaQuery action placement with a CSS grid layout (#6932). Measure stack height with offsetHeight instead of scrollHeight so the indicator stays aligned with the title when spawning toasts inside an expanded stack (#6952).
• Dropdown: Align submenu item start padding with the menu padding scale (#6941). Center the trigger icon in the with-sections example (#6944). Keep menus wide enough for their rows and icons on narrow screens while capping them to the available viewport width (#6957).
• ComboBox: Keep scrolling on the controlled listbox rather than the outer popover, so keyboard navigation and virtual focus can reveal every option (#6959).
• Slider: Anchor horizontal fills from the inline start side so filled tracks align with React Aria thumb positions in RTL locales (#6964).
• Switch: Prevent thumb jitter when toggling by animating its position without changing the flex layout, while preserving RTL alignment and custom track widths (#6970).
• Tabs: Keep the indicator aligned with the initially selected tab during hydration by deferring transitions until the first client frame, while preserving normal animations for subsequent selections (#6988).
• Drawer: Recover from a cancelled swipe without leaving the sheet displaced or stuck in a drag state. lostpointercapture on a hit child is ignored, the panel snaps back when the dialog loses capture, and consumer style props merge with touch-action: none instead of replacing it. The open slide runs on Drawer.Content because React Aria clears data-entering on the dialog before paint (#6968).
• ScrollShadow: Clear automatic visibility attributes when isEnabled changes to false, preventing stale edge shadows from remaining visible (#6964).
• Calendar: Keep weekday header labels in equal columns (#6925).
• Overlays: Speed up open and close on mid-range phones. Overlay enter and exit animate opacity and transform only (no filter keyframes), touch devices skip backdrop-filter on blurred modal and drawer scrims, WebKit keeps popovers mounted until the close animation is running, coarse pointers show Dropdown menus as soon as they are placed instead of waiting on a keyboard check, and a swiped-away Drawer clears inline transition: none so the exit transition runs (#6934). Popover-based components also preserve forwarded ref cleanup, follow local and slotted shouldSkipAnimation preferences, and retain overlay motion styles with selective CSS imports (6f0678c). Reopening retained Modal or Popover content now restores its original or newly supplied opacity instead of leaving it invisible (1b64b24).
• List popovers: Nest the outer radius with the item padding on Select, Dropdown, Autocomplete, and ComboBox (#6916).
• Picker indicators: Keep the checkmark off the label in Select, ComboBox, and Autocomplete popovers (#6908).
• AvatarGroup: Clip overlap follows the avatar radius (#6884).
• Checkbox: Keep the checkmark SVG mounted so the draw animation no longer flashes when toggling indeterminate selection in Table (#6890).
• ScrollShadow: Remove the mask seam at fractional device pixel ratios (#6914).
• Radio: Pair :focus-visible, :hover, and :active with the existing data-* state rules on Radio (#6879).
• Toast styles: Pair data-* attributes with :focus-visible and :hover rules (#6879).

StylesCopy Anchor Link

• Field autofill: Keep variant="secondary" (and other variants) on Input, TextArea, InputGroup, SearchField, NumberField, and ComboBox when the browser autofills values. Autofill rules now read each variant's fill token and use an inset box-shadow cover in Chromium instead of hardcoding primary field colors (#6943).
• Disclosure: Remove a stray .accordion__heading rule from disclosure.css (#6904).
• Chip: Empty .chip--md — it re-declared the text-xs already on the base .chip class (#6879).

ComponentsCopy Anchor Link

• Separator: Add isDecorative for purely visual dividers. Decorative separators render with presentational semantics and are hidden from assistive technology while retaining their styles and custom render support (#6959).
• Rendering performance: Avoid render-prop class-name resolution when a static class name is sufficient, memoize variant output and merged class names, and pass children directly to React Aria primitives. This reduces avoidable work across buttons, forms, selection controls, overlays, date and color inputs, collections, navigation, and display components while preserving function-valued className and children APIs (#6947).
• Display names: Set displayName on component parts to HeroUI.Component.SubPart and correct seven mismatched names (#6879).
• EmptyState: Add the missing "use client" directive (#6879).

AccessibilityCopy Anchor Link

• Popovers and date pickers: Preserve custom render behavior while removing orphaned accessible-name attributes from generic popover containers. DatePicker and DateRangePicker now carry their dialog labels onto React Aria's automatic dialog wrapper (#6959).
• Calendars and groups: Render Calendar and RangeCalendar headers as neutral containers so they do not create nested banner landmarks. Nested ToggleButtonGroup elements no longer expose unsupported aria-orientation on a group role (#6959).
• Examples: Improve accessible names and semantics across Storybook stories, mark visual dividers as decorative, and connect tabs to their content panels (#6959).

StorybookCopy Anchor Link

• Responsive demos: Adapt the component and color demos to smaller viewports with responsive sizing, spacing, wrapping, and layout behavior (#6958).

LinksCopy Anchor Link

• Component Docs
• GitHub Repository
• GitHub PR #6892

ContributorsCopy Anchor Link

Thanks to everyone who contributed to this release!