v7.2.0

7.2.0 (2025-02-12)

Features

• add typography shortcut variables (#2110) (39f20a5)
• Sheet: add background css api (#2105) (51d1dc2)

Bug Fixes

• Popup: fix animation for nested non portal popups (#2109) (ccd3bdc)
• Select: keyboard behavior on mobile (#2082) (95a1d20)
• use Popup and Modal as layer (#2111) (318bfa2)

v7.1.1

7.1.1 (2025-02-10)

Bug Fixes

• Tab: click on tabs should not generate 'submit' event (#2103) (dd35766)

v7.1.0

7.1.0 (2025-02-07)

Features

• Table: add interactive descriptor (#2090) (09906b2)

Bug Fixes

• fix esm build (#2099) (e3e702c)
• i18n: use correct keyset type (#2085) (5d34c33)

v6.43.0

6.43.0 (2025-02-06)

Features

• Table: add interactive descriptor (#2093) (01b1783)

v7.0.0

7.0.0 (2025-02-04)

⚠️ Breaking Changes

• Migrate Popup, Modal and other overlay components to use floating-ui instead of popper.js.
• Built JS files are now in ES2022

Button

• Rename CSS API: --g-button-icon-size → --g-button-icon-space.
• Component now accepts any properties from the <button/> or <a/> element.
• Deprecate extraProps property.

Link

• Component now accepts any properties from the <a/> element.
• Deprecate extraProps property.

RadioButton

• Rename component to SegmentedRadioGroup.
• New appearance.
• No value is checked by default now (before, the first one was checked if no value has been provided).

RadioGroup

• No value is checked by default now (before, the first one was checked if no value has been provided).

Slider

• Remove deprecated debounceDelay property.
• Remove deprecated availableValues property. Set step to null and use marks, min and max properties to specify available values to select instead.
• Remove deprecated marksCount property. Use marks instead.
• Remove deprecated hasTooltip property. Use tooltipDisplay instead.
• Update parameters of prepareSliderInnerState due to properties removal.

NumberInput

Component moved to the main entrypoint.

Breadcrumbs

Breadcrumbs is swapped with the component from the lab entrypoint.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy'; // <-- Old Breadcrumbs
import {Breadcrumbs} from '@gravity-ui/uikit'; // <-- New Breadcrumbs

Tabs

The component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Tabs as LegacyTabs} from '@gravity-ui/uikit/legacy'; // <-- Old Tabs

Instead we introduce new set of components: TabList, Tab and TabPanel which allow creating fully accessible tabs pattern. Refers to the docs for more details.

Popup

• Change offset property type to number | {mainAxis?: number; crossAxis?: number}.
• Change default placement to bottom.
• Remove disableLayer and type properties. Floating elements are no longer attached to the "layer" context.
• Remove modifiers property. Use floatingMiddlewares instead, check the Floating UI docs for more info.

  ⚠️ Providing own middlewares will replace the defaults. Before, with modifires from popper.js it was adding to the defaults

• Remove altBoundary property. It now applies automatically when disablePortal is true.
• Remove deprecated onClick property.
• Remove onEnterKeyDown property.
• Remove onMouseEnter and onMouseLeave properties.
• Remove onFocus and onBlur properties.
• Remove container property. If you need to override Portal container, wrap Popup with PortalProvider.
• Remove contentClassName property. There is no more content element.
• Replace restoreFocus and restoreFocusRef properties with returnFocus?: boolean | React.Ref<HTMLElement>.
• Rename property: onTransitionEnter → onTransitionIn.
• Rename property: onTransitionEntered → onTransitionInComplete.
• Rename property: onTransitionExit → onTransitionOut.
• Rename property: onTransitionExited → onTransitionOutComplete.
• Deprecate anchorRef property. Use anchorElement instead.
• Deprecate onClose, onEscapeKeyDown and onOutsideClick callback. Use onOpenChange instead.

Popover

Popover is reworked to be a "low-level" component with built-in interactivity and simplier API. See README for details.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Popover as LegacyPopover} from '@gravity-ui/uikit/legacy'; // <-- Old Popover
import {Popover} from '@gravity-ui/uikit'; // <-- New Popover

Tooltip

• Remove id property. Tooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

ActionTooltip

• Update open/close animation.
• Remove id property. ActionTooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

Toaster

• TheToasterProvder now requires the toaster property. You must pass an instance of the Toaster class.
• The Toaster class is now responsible for managing toast state but no longer handles rendering. As a result, there is no need to call Toaster.injectReactDOMClient(ReactDOMClient) anymore.
• Сalling new Toaster() now returns a new object every time. If you want to use toasts within React through the useToaster() hook or use the Toaster object directly outside React (e.g., in Redux side effects, etc.) while ensuring that toasts appear in a same screen area without overlapping, you need to make sure that the object passed to the ToasterProvider and the one used outside React is the same instance.
• To get a single shared instance of the Toaster, import it from @gravity-ui/uikit/toaster-singleton.
• The toaster-singleton-react-18.js file is no longer exists, there is no any specific dependency on a particular React version anymore.
• Toaster singleton methods is no longer binded to singleton instance.

CopyToClipboard

• Use native copy method instead of react-copy-to-clipboard.
• Remove optionsproperty from react-copy-to-clipboard API.

ClipboardButton

• Remove optionsproperty.

Dialog

• Remove listenKeyEnter property from Dialog.Footer.

List

• Remove ListWrapper component.

Menu

• Remove icon property from Menu.Item. Use iconStart instead.
• Change item paddings.

Select

• Change renderControl signature: onKeyDown, onClick, popupId, selectId, activeIndex are replaced by single triggerProps object.

Sheet

• Remove extra wrapper around the content.

FilePreview

• Remove fullscreen mobile image preview.
• Change default image preview size.

HelpMark

• Remove placement property. Use new popoverProps property to pass any prop to Popover.
• Remove buttonProps property. All "top-level" props are now passed to the button element.
• Remove buttonRef property. Use normal ref instead.

TextInput

• Remove leftContent property. Use startContent instead.
• Remove rightContent property. Use endContent instead.

Avatar

• One of the following properties is now required: imgUrl, icon or text.
• Change font size of the text in s size.
• Change border width in 2xs size.
• Rename CSS API: --g-avatar-color → --g-avatar-text-color.

User

• Change the gap between the avatar and the text in m size.
• Change font size in xl size.
• Rework CSS API (replace all the variables with new ones).

UserLabel

• Replace children property with text property.
• Change spacing between elements and font sizes.
• Add a border for avatar.
• Rework CSS API (replace all the variables with new ones).

useFocusWithin

• Remove FocusWithinProps type, use UseFocusWithinProps instead.

useBodyScrollLock

• Remove useBodyScrollLock hook. We rely on floating-ui internals now.

Layout

• RemoveLayoutProvider component. Use layout prop from the ThemeProvider instead.

Styles

• Update default monospace font family: prioritize Liberation Mono over Ubuntu Mono.
• Remove scrollbars styling.
• Update text offset in Checkbox, Radio and Switch.
• New appearance of disabled state in Checkbox and Radio.

🚀 Features

Popup

• Add modal property which controls whether Popup should behave like a Modal, trapping focus inside the floating element.
• Add initialFocus property which moves focus to the specified element when autoFocus is true. It can be number (nth tabbable) or React.Ref.
• Add disableFocusVisuallyHiddenDismiss property which disables adding hidden controls for accessibility purposes when autoFocus is true.
• Add zIndex property

Tooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.
• Add role property which can be either tooltip or label. See README for details.

ActionTooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.

ClipboardButton

• Allow children to be ReactElement.

Avatar

• Add 3xs size.
• Support all AriaLabelingProps.
• Add --g-avatar-border-width, --g-avatar-inner-border-width and --g-avatar-font-weight to CSS API.

User

• Add 3xs size.
• Support all AriaLabelingProps.
• Support string in avatar property.

UserLabel

• Add 3xs and 2xs sizes.
• Add description property.

v6.42.0

6.42.0 (2025-01-28)

Features

• FilePreview: add support of most types of files uploaded via input (#2063) (059643c)

Bug Fixes

• FilePreview: fix view of image preview (#2060) (3f580e1)
• FilePreview: fix visual of actions (#2062) (978503e)
• Sheet: fix incorrect behavior if allowHideOnContentScroll is enabled (#2053) (3075beb)

v6.41.0

6.41.0 (2025-01-16)

Features

• migrate to new JSX transform (#2006) (300a013)
• pass event to handler callback in useOutsideClick (#1998) (3097c80)
• require React version 16.14.0 or higher (#2018) (f90b57b)

Bug Fixes

• NumberInput: disable rounding decimal to integer without passed step (#2037) (3a6a6bc)
• NumberInput: zero min/max props (#2046) (255aa9d)

v7.0.0-beta.6

⚠️ Breaking Changes

• Migrate Popup, Modal and other overlay components to use floating-ui instead of popper.js.
• Built JS files are now in ES2022

Button

• Rename CSS API: --g-button-icon-size → --g-button-icon-space.
• Component now accepts any properties from the <button/> or <a/> element.
• Deprecate extraProps property.

Link

• Component now accepts any properties from the <a/> element.
• Deprecate extraProps property.

RadioButton

• Rename component to SegmentedRadioGroup.
• New appearance.
• No value is checked by default now (before, the first one was checked if no value has been provided).

RadioGroup

• No value is checked by default now (before, the first one was checked if no value has been provided).

Slider

• Remove deprecated debounceDelay property.
• Remove deprecated availableValues property. Set step to null and use marks, min and max properties to specify available values to select instead.
• Remove deprecated marksCount property. Use marks instead.
• Remove deprecated hasTooltip property. Use tooltipDisplay instead.
• Update parameters of prepareSliderInnerState due to properties removal.

NumberInput

Component moved to the main entrypoint.

Breadcrumbs

Breadcrumbs is swapped with the component from the lab entrypoint.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy'; // <-- Old Breadcrumbs
import {Breadcrumbs} from '@gravity-ui/uikit'; // <-- New Breadcrumbs

Popup

• Change offset property type to number | {mainAxis?: number; crossAxis?: number}.
• Change default placement to bottom.
• Remove disableLayer and type properties. Floating elements are no longer attached to the "layer" context.
• Remove modifiers property. Use floatingMiddlewares instead, check the Floating UI docs for more info.

  ⚠️ Providing own middlewares will replace the defaults. Before, with modifires from popper.js it was adding to the defaults

• Remove altBoundary property. It now applies automatically when disablePortal is true.
• Remove deprecated onClick property.
• Remove onEnterKeyDown property.
• Remove onMouseEnter and onMouseLeave properties.
• Remove onFocus and onBlur properties.
• Remove container property. If you need to override Portal container, wrap Popup with PortalProvider.
• Remove contentClassName property. There is no more content element.
• Replace restoreFocus and restoreFocusRef properties with returnFocus?: boolean | React.Ref<HTMLElement>.
• Rename property: onTransitionEnter → onTransitionIn.
• Rename property: onTransitionEntered → onTransitionInComplete.
• Rename property: onTransitionExit → onTransitionOut.
• Rename property: onTransitionExited → onTransitionOutComplete.
• Deprecate anchorRef property. Use anchorElement instead.
• Deprecate onClose, onEscapeKeyDown and onOutsideClick callback. Use onOpenChange instead.

Popover

Popover is reworked to be a "low-level" component with built-in interactivity and simplier API. See README for details.

The old component has beed moved to the legacy entrypoint, marked as deprecated and will be removed in v8:

import {Popover as LegacyPopover} from '@gravity-ui/uikit/legacy'; // <-- Old Popover
import {Popover} from '@gravity-ui/uikit'; // <-- New Popover

Tooltip

• Remove id property. Tooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

ActionTooltip

• Update open/close animation.
• Remove id property. ActionTooltip sets it automatically now to connect the reference via a11y attributes.
• Remove contentClassName property. There is no more content element.
• Remove disablePortal property.

Toaster

• TheToasterProvder now requires the toaster property. You must pass an instance of the Toaster class.
• The Toaster class is now responsible for managing toast state but no longer handles rendering. As a result, there is no need to call Toaster.injectReactDOMClient(ReactDOMClient) anymore.
• Сalling new Toaster() now returns a new object every time. If you want to use toasts within React through the useToaster() hook or use the Toaster object directly outside React (e.g., in Redux side effects, etc.) while ensuring that toasts appear in a same screen area without overlapping, you need to make sure that the object passed to the ToasterProvider and the one used outside React is the same instance.
• To get a single shared instance of the Toaster, import it from @gravity-ui/uikit/toaster-singleton.
• The toaster-singleton-react-18.js file is no longer exists, there is no any specific dependency on a particular React version anymore.
• Toaster singleton methods is no longer binded to singleton instance.

CopyToClipboard

• Use native copy method instead of react-copy-to-clipboard.
• Remove optionsproperty from react-copy-to-clipboard API.

ClipboardButton

• Remove optionsproperty.

Dialog

• Remove listenKeyEnter property from Dialog.Footer.

List

• Remove ListWrapper component.

Menu

• Remove icon property from Menu.Item. Use iconStart instead.
• Change item paddings.

Select

• Change renderControl signature: onKeyDown, onClick, popupId, selectId, activeIndex are replaced by single triggerProps object.

Sheet

• Remove extra wrapper around the content.

FilePreview

• Remove fullscreen mobile image preview.
• Change default image preview size.

HelpMark

• Remove placement property. Use new popoverProps property to pass any prop to Popover.
• Remove buttonProps property. All "top-level" props are now passed to the button element.
• Remove buttonRef property. Use normal ref instead.

TextInput

• Remove leftContent property. Use startContent instead.
• Remove rightContent property. Use endContent instead.

Avatar

• One of the following properties is now required: imgUrl, icon or text.
• Change font size of the text in s size.
• Change border width in 2xs size.
• Rename CSS API: --g-avatar-color → --g-avatar-text-color.

User

• Change the gap between the avatar and the text in m size.
• Change font size in xl size.
• Rework CSS API (replace all the variables with new ones).

UserLabel

• Replace children property with text property.
• Change spacing between elements and font sizes.
• Add a border for avatar.
• Rework CSS API (replace all the variables with new ones).

useFocusWithin

• Remove FocusWithinProps type, use UseFocusWithinProps instead.

useBodyScrollLock

• Remove useBodyScrollLock hook. We rely on floating-ui internals now.

Layout

• RemoveLayoutProvider component. Use layout prop from the ThemeProvider instead.

Styles

• Update default monospace font family: prioritize Liberation Mono over Ubuntu Mono.
• Remove scrollbars styling.
• Update text offset in Checkbox, Radio and Switch.
• New appearance of disabled state in Checkbox and Radio.

🚀 Features

Popup

• Add modal property which controls whether Popup should behave like a Modal, trapping focus inside the floating element.
• Add initialFocus property which moves focus to the specified element when autoFocus is true. It can be number (nth tabbable) or React.Ref.
• Add disableFocusVisuallyHiddenDismiss property which disables adding hidden controls for accessibility purposes when autoFocus is true.
• Add zIndex property

Tooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.
• Add role property which can be either tooltip or label. See README for details.

ActionTooltip

• children property can be a function that returns ReactElement.
• Add open and onOpenChange for controlled state.
• Add trigger property. See README for details.

ClipboardButton

• Allow children to be ReactElement.

Avatar

• Add 3xs size.
• Support all AriaLabelingProps.
• Add --g-avatar-border-width, --g-avatar-inner-border-width and --g-avatar-font-weight to CSS API.

User

• Add 3xs size.
• Support all AriaLabelingProps.
• Support string in avatar property.

UserLabel

• Add 3xs and 2xs sizes.
• Add description property.

v6.40.0

6.40.0 (2024-12-24)

Features

• Select: add data for option group (#2011) (46c9d28)

v6.39.0

6.39.0 (2024-12-19)

Features

• Progress: change prop text (#1993) (92e53a0)
• Select: add title for option (#1994) (03b5dbf)
• styles: manage animations by user settings (#1996) (19ca365)
• Tabs: allow string for TabItem counter value (#1989) (b628086)

Bug Fixes

• Icon: remove redundant color:inherit style (#1999) (d6cda6e)
• Sheet: remove animation lags when closing in some browsers (#1984) (555b186)