TL;DR

Документация по миграции с v7 на v8

BREAKING CHANGE

Улучшения

• Обновлён список поддерживаемых браузеров

  - ChromeAndroid >= 63
  + ChromeAndroid >= 84
  - iOS >= 12
  + iOS >= 15
  - Chrome >= 63
  + Chrome >= 84
  - Firefox >= 55
  + Firefox >= 115
  - Edge >= 79
  + Edge >= 109
  - Opera >= 50
  + Opera >= 90
  - Safari >= 12
  + Safari >= 15
  - Samsung >= 8.2
  + Samsung >= 14

• Поднята целевая версия ECMAScript для компиляции с es2017 до es2020 (#9306)

• Для поддержки React Compiler изменен внутренний код ряда компонентов (#6919)

• ActionSheet:

  • Обработчик onClose переименован в onClosed, сам onClose теперь срабатывает перед началом анимации закрытия (#9285)
  • Параметр передаваемый в onClosed помечен как устаревший и будет удален в v10. Для получения причины закрытия используйте reason, передаваемый в onClose (#9285)
  • Экспортируемый тип ActionSheetOnCloseOptions устарел и будет удален в v10 – испозьуйте тип ActionSheetOnCloseReason (#9285)

• ChipsSelect:

  • Переключение между управляемым и неуправляемым состоянием компонента больше не обрабатывается (#9246)
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9063, прокидываются в корень компонента (#9186)

• Banner: В свойстве imageTheme добавлено значение auto для того, чтобы imageTheme определялось автоматически, в зависимости от цветовой схемы приложения – auto теперь используется как значение по умолчанию (#9188)

• Alert:

  • Добавлен обработчик закрытия, срабатывающий перед анимацией закрытия onClose, в которое передается reason – причина закрытия (#9282)
  • Свойство onClose переименовано на onClosed (#9282)

• DateInput:

  • Флаг accessible теперь включен по умолчанию (#9194)
  • Изменен тип свойства onChange на (value: Date | null) => void (#9195)

• DateRangeInput:

  • Флаг accessible теперь включен по умолчанию (#9194)
  • Изменен тип свойства onChange на (value: DateRangeType | null) => void. Теперь value может быть null при сбросе выбранного промежутка дат (#9195)

• Calendar: Изменен тип свойства onChange на (value: Date) => void (#9195)

• CalendarRange: Изменен тип свойства onChange на (value: DateRangeType) => void. Теперь value может быть null при сбросе выбранного промежутка дат (#9195)

• PopoutWrapper: Свойство fixed было удалено. Вместо него можно использовать свойство strategy (#9232)
  Примеры правильной миграции:

  <PopoutWrapper
    closing={closing}
    onClick={close}
  - fixed={false}
  + strategy="none"
  >
  
  </PopoutWrapper>

  <PopoutWrapper
    closing={closing}
    onClick={close}
  - fixed
  >
  
  </PopoutWrapper>

• ContentBadge: Изменены цвета компонента при appearance="neutral" в режимах primary и secondary (#9190)

• Snackbar: Переименовано свойство onClose в onClosed (#8839)
  Свойство onClose переименовано в onClosed для улучшения семантики. Обработчик onClosed вызывается после окончания анимации закрытия снекбара, а не в момент начала закрытия.
  Пример миграции:

  - <Snackbar onClose={() => setSnackbar(null)}>
  + <Snackbar onClosed={() => setSnackbar(null)}>
    Message
  </Snackbar>

• RichCell:

  • Изменена структура рендеринга контента. Свойства after и afterCaption теперь рендерятся справа от основного блока, а новые свойства meta и submeta - внутри основного блока после основного контента (#9304)
  • Свойство afterCaption помечено как deprecated и будет удалено в v10. Используйте submeta вместо afterCaption (#9304)

• SegmentedControl: Улучшено выведение типов (#9160)

• Свойства baseClassName и baseStyle были удалены (#9214)

• Удален устаревший HOC withModalRootContext, вместо него можно использовать хук useModalRootContext. Также из контекста были удалены методы updateModalHeight, registerModal (#9278)

Исправления

• RichCell: Минимальная высота RichCell уменьшена до 48px - compact и 44px - regular (#9283)
• File: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9044, прокидываются в корень компонента (#9181)
• Checkbox: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
• Radio: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
• Switch: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9043, прокидываются в корень компонента (#9180)
• WriteBar: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9086, прокидываются в корень компонента (#9184)
• Textarea:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9086, прокидываются в корень компонента (#9184)
  • Изменены внутренние отступы для компактного режима (#9247)
  • На safari не было отступа снизу для placeholder (#9481)
• SplitLayout: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9069, прокидываются в корень компонента (#9182)
• Input: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• Search: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• CustomSelect:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
  • Флаг accessible теперь включен по умолчанию (#9194)
• NativeSelect: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
• ChipsInput: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9063, прокидываются в корень компонента (#9186)
• Button:
  • Исправлена потеря фокуса при loading={true} (#9312)
    Кнопки со свойством loading больше не получают атрибут disabled, что позволяет сохранять фокус во время загрузки. Добавлены ARIA-атрибуты (aria-busy, aria-disabled) для правильной работы со скринридерами.
  • Добавлено свойство loadingLabel для указания лейбла при loading={true} (#9312)
  • Улучшена доступность ссылок с loading и disabled согласно WAI-ARIA (#9312)
    Для ссылок (href) с состоянием loading или disabled теперь корректно удаляется атрибут href, добавляется role="link" и устанавливаются необходимые ARIA-атрибуты для правильной работы с ассистивными технологиями.
• HorizontalCell: Ширина для размеров теперь фиксированная (#9316)
• Из-за отказа от happy-css-modules, именование всех CSS классов переведёно в camelCase формат (#9355)

Не ломающие изменения

Улучшения

• AdaptivityProvider: Свойства sizeX и sizeY теперь @deprecated, используйте density вместо sizeY, viewWidth={ViewWidth.MOBILE} вместо sizeX="compact" и viewWidth={ViewWidth.SMALL_TABLET} вместо sizeX="regular" (#9334)

  Пример миграции

  - <AdaptivityProvider sizeX="compact">
  + <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
  
  - <AdaptivityProvider sizeX="regular">
  + <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>
  
  - <AdaptivityProvider sizeY="compact">
  + <AdaptivityProvider density="compact">
  
  - <AdaptivityProvider sizeY="regular">
  + <AdaptivityProvider density="regular">
  
  - <AdaptivityProvider sizeX="compact" sizeY="compact">
  + <AdaptivityProvider viewWidth={ViewWidth.MOBILE} density="compact">
  
  - <AdaptivityProvider sizeX="regular" sizeY="regular">
  + <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} density="regular">
  
  ...

Исправления

• Анимация перехода между панелями могла превраться из-за всплытия другой анимации (#9604)
• Всплывающие элементы меняли местоположение при анимации перехода между панелей (#9603)

Исправления

• Snackbar: Экспортирован тип компонента Snackbar.Basic - SnackbarBasicProps (#9611)

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.74.0 до 4.75.0

Исправления

• В компонентах PanelHeader и SplitCol, отменены изменения с переводом position: fixed на position: sticky при включени свойства fixed (#9582)

Улучшения

• Удалены проверки типа hasOwnProperty (#9581)

Исправления

• Tappable: active состояние у вложенных элементов всплывало на верх (#9573)

Документация

• Storybook: Изменена иконка с обозначением направления текста (#9552)
• Badge: Обновлено описание компонента (#9551)

Исправления

• ModalPage: Исправлены "прыжки" в ширине контента когда пропадает полоса прокрутки (#9537)

  2026-03-02.14.16.53.mov

• CustomScrollView: Для Android WebView отрисовывалась широкая полоса прокрутки на тач устройствах (#9538)

Исправления

• PanelHeader: Была сломана работоспособность свойства float (#9516)
• PanelHeader: Для статичной панели(fixed = false) был убран z-index, так как он мог перекрывать другую панель (#9521)
• SplitCol: Убран block-size: 100% у корневой колонки (.host), чтобы высота колонки корректно рассчитывалась флексбоксом, не ломалась из‑за жесткого 100% и совпадала с соседними колонками при разном контенте, в том числе в конфигурациях с одной колонкой (#9522)

Исправления

• Button: После завершения загрузки (loading: true → false) кнопка больше не остаётся в визуальном состоянии hover (#9478)
• Calendar:
  • Корректная работа с пропом timezone при выборе дня и при смене часов/минут в режиме выбора времени (время и день больше не сдвигаются из‑за системной таймзоны) (#9474)
  • Исправлен баг с некорректным отображением цифр в меню времени при наличии скролл-бара (#9480)
• DateInput: Корректное отображение и ввод даты/времени при заданном timezone (и в календаре, и при ручном вводе в поля) (#9474)
• Textarea: На safari не было отступа снизу для placeholder (#9481)
• CustomSelectOption: Добавлено свойство textNoWrap для предотвращения переноса текста (#9480)
• Accordion: По интерактивным элементам можно было навигироваться внутри скрытого аккордиона (#9496)

Улучшения

• Box, Flex, SimpleGrid: Свойство padding, включая его производные, теперь поддерживает значение 'system', которое применяет платформенные отступы из @vkontakte/vkui-tokens – это упростит миграцию с устаревшего компонента Div на Box (#9388)
• FormLayoutGroup: Добавлено свойство noPadding (#9415)

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.71.0 до 4.73.1 (#9428)
• @vkontakte/vkui-floating-ui обновлен с 0.2.7 до 0.2.8 (#9477)

Документация

• При навигации не раскрывалось боковое меню (#9448)
• Сбрасывался код в редакторе после скрытия и раскрытия блока (#9511)

Исправления

• Свайпбек мог блокировать тач события (#9471)

Улучшения

• Добавлен кодмод для компонента ActionSheet на изменение свойства onClose -> onClosed