v5.0.0

Components v5 adopts UIKit v8, updates list and overlay internals, and removes AdaptiveTabs. This major release requires React 18 or 19 and includes API changes for dialogs, story dismissal, and native HTML attributes.

Highlights

• UIKit v8: components use the current List, Popover, and overlay APIs without the legacy entry point.
• Accessible ItemSelector: virtualized lists with pointer and keyboard reordering.
• Gallery copy feedback: the copy-link action uses ClipboardButton to show clipboard status.
• Updated overlays: dialogs and sheets follow UIKit v8 open-state handling.

⚠️ Breaking changes

React and dependencies

UIKit 8 and React / React DOM 18 or 19 are required. Support for UIKit 7 and React 16/17 is removed.

lodash is replaced with es-toolkit; declare lodash yourself if your application imports it. Virtualization and drag-and-drop dependencies are included in this package.

UIKit v8 migration guide

AdaptiveTabs

Remove AdaptiveTabs imports and usage. The component, its related exports, and its translation keyset are removed.

Replace AdaptiveTabs with UIKit's TabList and Tab, using contentOverflow="collapse" for the overflow menu. See the AdaptiveTabs migration guide for prop replacements and behavior differences.

Dialogs and cookie consent

Replace onClose with onOpenChange(open, event?, reason?) in ChangelogDialog and ConfirmDialog.

ConfirmDialog inherits the UIKit v8 Dialog API: replace size with maxWidth and fullWidth, and update other removed Dialog props.

Remove disableHeightTransition from ChangelogDialog and cookie consent popup settings. UIKit no longer animates content height. Cookie consent popup onClose remains unchanged.

Stories and StoriesGroup

onClose remains available, but its event and reason arguments are now optional.

Update reason checks:

• escapeKeyDown → escape-key
• outsideClick → outside-press
• closeButtonClick → click

Callbacks use UIKit's OpenChangeReason type. Handle dismissal without an event or reason.

ItemSelector

Item IDs must be unique and stable.

renderItem(item, active, index), renderValueItem(item, active, index), and filterItem(query)(item) retain their existing signatures. The active argument now indicates the keyboard cursor only; use CSS :hover for pointer hover.

Selected-item reordering is disabled while the selected-items search is active. List markup and CSS classes change; review custom row styles and DOM-based tests.

Native attributes and Button props

Pass native HTML attributes directly instead of through extraProps, including in StoreBadge and button props accepted by composite components.

Custom story actions and other Button-based APIs use UIKit v8 Button views. Replace normal-contrast with contrast-light; recreate removed outlined and flat contrast views through the Button CSS API.

Other callback, translation, and visual changes

PromoSheet.onClose is a no-argument callback and fires when dismissing the sheet, clicking the close button, or clicking the primary action.

getGalleryItemCopyLinkAction.onCopy now follows ClipboardButtonProps['onCopy'].

Update custom translations for Gallery.actions and TokenizedInput.suggestions.title. Cookie consent notifications use button_accept instead of the removed button_OK key; the default label changes from “OK” to “Accept”.

SharePopover.className is applied to the trigger button. Popover markup changes, and Notification no longer sets a base background color. Review custom CSS and screenshot baselines.

Full changelog

Changes by component and package API

ChangelogDialog and ConfirmDialog

• Adopt UIKit v8 Dialog open-state handling.
• Update documentation and examples to use onOpenChange.
• Remove ChangelogDialog's height-transition setting.

CookieConsent

• Remove the popup height-transition setting.
• Preserve the popup's public onClose callback while adapting internal modal handling.
• Use the localized “Accept” label by default in ConsentNotification.

Gallery

• Show clipboard feedback through ClipboardButton.
• Migrate mobile actions to the new List and Sheet APIs.
• Preserve the mobile action layout and add an accessible list label.

ItemSelector

• Migrate to the new List with virtualization and drag-and-drop layers.
• Support pointer and keyboard reordering of selected items.
• Preserve custom rendering and filtering callback signatures.
• Show row actions on hover or keyboard activation; keep them visible on devices without hover.
• Add accessible search and remove-button labels.

Notification

• Remove the base background color so notifications can inherit their surrounding background.
• Pass native link attributes directly.

PromoSheet

• Migrate to Sheet's open and onOpenChange API internally.
• Notify onClose for dismissal, close-button clicks, and primary-action clicks.
• Update contrast button styling for UIKit v8.

Reactions and OnboardingMenu

• Update popup anchors and dismissal handling.
• Migrate native attributes, spacing values, and contrast button styles to UIKit v8.

SharePopover

• Replace the legacy Popover with the current root component.
• Adapt hover, click, focus, and close-delay behavior.
• Guard Web Share API access when navigator is unavailable.
• Remove the manual copy-button width measurement.

Stories and StoriesGroup

• Adapt modal dismissal to UIKit v8 while preserving onClose.
• Update close reasons and allow missing event/reason arguments.
• Update action spacing and Storybook content examples.

StoreBadge

• Pass native link attributes directly, including the accessible label.

TokenizedInput

• Migrate suggestions to the new List API.
• Preserve keyboard-controlled suggestion activation.
• Render loading and empty states separately.
• Add an accessible suggestions label.

Package and examples

• Require UIKit 8 and React / React DOM 18 or 19.
• Replace lodash with es-toolkit.
• Include virtualization and drag-and-drop dependencies.
• Update application setup and Storybook to use Provider.

Upgrading

1. Install @gravity-ui/components@^5 and @gravity-ui/uikit@^8 with React / React DOM 18 or 19.
2. Replace the application-level ThemeProvider with Provider.
3. Replace AdaptiveTabs and update affected callbacks, native attributes, and Button views.
4. Review custom translations, CSS selectors, and screenshot baselines.

Follow the UIKit v8 migration guide for provider, theme, layout, and underlying component changes.