Улучшения

• Panel: добавлена возможность устанавливать в качестве фона Panel градиент (#6736)

Исправления

• DateInput: в Calendar не прокидывались свойства minDateTime и maxDateTime (#6767)
• Banner: нельзя было размешять внутри блочные элементы (#6675 by @Semigradsky)
• PullToRefresh: исключена возможность повторного вызова onRefresh() на iOS (#6723)
• Pagination: "заедали" состояния hover/active у элемента PaginationPageButton (#6712)
• HorizontalCell: теперь для переноса длинного текста используется CSS свойство break-word вместо break-all (#6771)
• Select/NativeSelect/DatePicker: отключена передача не используемых свойств из Select в NativeSelect (#6663) (#6667)
• Search: выровнены боковые отступы (#6724)
• Snackbar: значение свойства layout теперь приоритетней значения, вычисленного на основе окружения (#6731)
• ModalPageHeader: исправлены боковые отступы у сепаратора (#6726)
• HorizontalScroll: кнопки для навигации фокусировались через клавиатуру, хотя они должны быть aria-hidden (#6687)
• ModalRoot: при нажатии Esc сафари переходил в оконный режим (#6681)
• CustomSelectOption: добавлен пробел для скринридеров (#6694)
• File: убрана лишняя надпись "Выбрать файл" (#6696)
• FormStatus: добавлена роль status или alert в зависимости от mode (#6701)

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

• Основная документация (Styleguide)
  • Была проблема с долгой загрузкой (#6689, #6690, #6691)
  • Теперь при поиске компонента, в запросе автоматически удаляются лишние пробелы (#6714)
• Песочница (Storybook)
  • Добавлена возможность переключать направление текста (#6703)
  • В следующих компонентах были поправлены примеры под a11y:
    • CustomSelectOption (#6693)
    • ButtonGroup / IconButton (#6697)
    • Tabbple (#6698)
    • Image (#6699)

Исправления

Компоненты

• AdaptivityProvider: значение параметра адаптивности sizeY, если не переопределено через свойство sizeY, определяется автоматически, если хотя бы одно из свойств AdaptivityProvider viewWidth или viewHeight определено. В автоматическом определения sizeY теперь также участвует свойство hasPointer. Раньше его значение определялось методом из библиотеки @vkontakte/vkjs, далее передавалось напрямую в контекст и в логике AdaptivityProvider не участвовало, что было неправильно (#6489)
• Accordion: контент мог быть скрыт не полностью (#6429)
• Cell: в draggable не работал автоскролл, если у родителя нет height: 100% (#6456)
• ChipsSelect / ChipsInput
  • навигация между добавленными значениями теперь циклична (#6395)
  • поправлена проблема, что при readOnly можно было удалять значения (#6395)
• ChipsSelect / CustomSelect
  • теперь disabled свойство на опции влияет на поведение (#6640)
  • исправили некорректную высоту плавающего элемента (#6571)
  • исправлена ошибка позиционирования опций, если опции вынуждены распологаться над селектом (#6567)
• CustomScrollView: отключена кастомная полоса прокрутки для сенсорных экранов (#6437)
• DatePicker: свойство monthNames могло стать html-аттрибутом (#6386)
  -DateInput: программный фокус теперь сбрасывается при клике на кнопку "Готово" в режиме enableTime (#6446)
• FormField: фокус в элементах отрисовывался неправильно на некоторых iPhone устройствах (#6557)
• Group: исправлен отступ для description (#6577)
• ModalPage:
  • исправлен подсчёт высоты при изменении ориентации мобильного устройства (#6538)
  • исправлена работа dynamicContentHeight при height более чем 100% (#6637)
• ModalPage / ActionSheet: исправлена позиция скролла body, которая сбрасывалась при вызове ActionSheet из ModalPage (#6614)
• OnboardingTooltip:
  • добавлен параметр disableArrow, взамен arrow, которое было в v5, когда компонент назывался Tooltip (#6482)
  • возвращён параметр onPlacementChange (#6482)
• PullToRefresh:
  • компонент больше не влияет на поведение горизонтального скролла (#6540)
  • исправлено позиционирование контента внутри PullToRefresh. PullToRefresh теперь растягивается на всю высоту контейнера, и контент (например <Placeholder stretched />) можно отцентровать по вертикали (#6613)
• Popover:
  • починена передача ref в children, если children это пользовательский компонент, обёрнутый в React.forwardRef (#6525)
  • возвращён параметр onPlacementChange (#6482)
• Popper:
  • исправлен пересчёт позиции при изменении текстовых нод при включенном свойстве autoUpdateOnTargetResize (#6572)
  • возвращён параметр onPlacementChange (#6482)
• IconButton: больше не растягивается в режиме ссылки (#6440)
• Image.Badge: тень перекрывала содержимое (#6494)
• Snackbar: исправлен маунт компонента при <AppRoot mode="full" /> (#6389)
• SimpleCell: текст в параметр indicator больше не обрезается (#6477)
• SubnavigationBar: исправлен рендер children, когда при использовании Conditional Rendering в DOM попадали пустые <li> (#6442)
• Textarea / Writebar: метод HTMLFormElement.reset() не сбрасывал значения (#6561)
• Tooltip: возвращён параметр onPlacementChange (#6482)

Типы

• добавлен экспорт ImageBaseProps (#6483)

Оптимизация

• в CSS, из-за негативного влияния на потребление памяти, удалено использование универсального селекторов, которые содержали в себе CSS переменные

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

• документация в мобильном представлении теперь определяет наличие курсора автоматически (#6647)
• интерактивные компоненты снова реагируют на клики (#6508)
• поправлена подсветка выделения текста под Chrome (#6447)

Улучшения

• Alert: добавили возможность передавать data-testid крестику через свойство dismissButtonTestId (#6394)

Исправления

• AdaptivityProvider: значение параметра адаптивности sizeY, если не переопределено через свойство sizeY, опеределяется автоматически если хотя бы одно из свойств AdaptivityProvider viewWidth или viewHeight определено. В автоматическом определения sizeY теперь также учавствует свойство hasPointer. Раньше оно передавалось напрямую в контекст, и в логике AdaptivityProvider не учавствовало, что было неправильно. Раньше в логике использовалось значение hasPointer из библиотеки, определяемое библиотекой, что могло идти вразрез со значением явно переданным в AdoptivityProvider. (#6585)
• View: на iOS сбрасывался скролл при отмене свайп-бэка (#6393)
• Cell:
  • в draggable режиме исправили двойной рендеринг плэйсхолдера (#6398)
  • в draggable не работал автоскролл если у родителя нет height: 100% (#6461)
• ActionSheet: убрали лишнее закругление у элементов меню при наведении на десктопе (#6399)
• DateInput: сбрасываем программный фокус при клике на кнопку "Готово" в режиме enableTime (#6401) (#6639)
• DateRangeInput: починили вызов onChange при передаче в value={[null, null]}. Исправили пример в Storybook, он теперь реагирует на изменение даты. (#6404)
• Switch/SegmentedControl(a11y): исправили видимость фокуса TalkBack на Android у компонентов основанных на input. Теперь при фокусе на таком элементе фокус визуально виден (#6405)
• WriteBarIcon: сообщение о том, что текстовое описание у компонента отсутствует, больше не выводится если такое описание есть, исправлено условие. (#6385)
• DatePicker: больше не прокидываем свойство monthNames в DOM, если на тач устройствах используется NativeDatePicker. Чтобы не было предупреждения в консоли. (#6410)
• CustomSelect:
  • передаем свойство required нативному селекту вместо инпута. Начиная с версии 5.10.0 мы передавали свойство required в инпут, используемый только для поиска опций селекта. Это блокировало отправку формы, даже если селект имел выбранное значение. Всё потому, что инпут для поиска по умолчанию имеет пустое value. (#6411)
  • спрятали тултип "Aвтозаполнение", появляющийся на iOS при фокусе на селекте (#6402)
• Tooltip: исправили передачу свойства getRootRef. Больше мы это свойство не перебиваем своим значением. (#6216)
• ModalPage:
  • исправили подсчёт высоты ModalPage при изменении ориентации мобильного устройства. (#6583)
  • исправлен расчёт высоты экрана при изменении высоты содержимого страницы с dynamicContentHeight (#6641)
• ChipsSelect:
  • теперь disabled свойство на опции влияет на поведение (#6640)
  • исправили некорректную высоту плавающего элемента (#6571)
• ModalPage/ActionSheet: исправили позицию скролла body, которая сбрасывалась при вызове ActionSheet из ModalPage. (#6642)
• PanelHeaderButton/TabsItem: вернули прежние hover-эффекты (#6602)
• PullToRefresh: исправили позиционирование контента внтури PullToRefresh. PullToRefresh теперь растягивается на всю высоту контейнера и контент (например <Placeholder stretched />) можно отцентровать по вертикали. (#6644)

Internal

• Удалили использование универсального селектора в css, потому что это негативно влияло на потребление памяти (#6507)

[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6.

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

Breaking changes

Зависимости

• Обновили минимально поддерживаемую версию React до v18.2.0.

• Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.

  Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.

  Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.

Сборка

• Обновили конфигурацию .browserlistrc:

  - android >= 5
  + ChromeAndroid >= 57
  - iOS >= 10
  + iOS >= 10.3
  - Chrome >= 51
  + Chrome >= 57
  Firefox >= 54
  Edge >= 18
  - Opera >= 38
  + Opera >= 44
  - Safari >= 10
  + Safari >= 10.1
  
  + Samsung >= 7.2
  

• В отдельной сборке теперь используется CSS Logical.

  Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.

Компоненты

• Переработали API многих компонентов:
  • Изменились API у компонентов, которые наследуются от Tappable.
  • Некоторые булевые пропы по умолчанию теперь falsy
    • PanelHeader: visor заменён на float, separator заменён на delimiter (#6277)
    • ModalPanelHeader: separator заменён на noSeparator (#6277)
    • Avatar: withBorder заменён на noBorder (#6286)
    • CardScroll: withSpaces заменён на noSpaces (#6286)
    • CustomSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
    • Image: withBorder заменён на noBorder (#6286)
    • ImageBase: withBorder заменён на noBorder (#6286)
    • Gallery: isDraggable заменён на dragDisabled (#6286)
    • GridAvatar: withBorder заменён на noBorder (#6286)
    • Placeholder: withPadding заменён на noPadding (#6286)
    • Select: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
    • Tabbar: shadow заменён на plain (#6286)
    • ChipsSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
• Провели работы по улучшению доступности, которые требовали мажорных изменений.
• Сделали стабильными компоненты:
  • ChipsSelect
  • HorizontalCellShowMore
  • Popover
  • Popper
  • TextTooltip Tooltip

    Предыдущий Tooltip (v5) переименован в OnboardingTooltip

• Удалили компонент FormLayout, используйте нативный form (#6302)
• ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
• PopoutWrapper:
  • поправили проблему с не скролящимся контентом (#6265)
  • hasMask заменён на noBackground (#6286)
• AppRoot: теперь при mode="embedded класс с названием темы навешивается на ближайший контейнер AppRoot, а не на <body>. Также при mode="full" классы vkui и vkui--* навешиваются на <html> вместо <body> (#6263, #6279)
• ConfigProvider: логика связанная с токенами вынесена из platform в отдельный параметр tokensClassNames (#5121)
• HorizontalCell: при size="m" фиксированная ширина заменена на максимальную ширину как при size="s" (#6318)

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

Исправления

• ActionSheetItem: убрали закругление при активном состоянии на Desktop (#6204)
• DateInput: не сбрасывался фокус с календаря после клика на кнопку "Готово" (#6244)
• View: на iOS сбрасывался скролл при отмене свайп-бэка (#6320)

Исправления после релиза v6.0.0-beta.2

• Tappable: поправлена проблема со специфичностью стилей (#6318)
• Снова актуализировали наш основной README.md (#6324)
• Документация
  • Удалены абсолютные пути (#6339)
  • Input: улучшен пример с кнопкой очистки поля (#6342)

Breaking changes

[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

• ConfigProvider: логика связанная с токенами вынесена из platform в отдельный параметр tokensClassNames (#5121)
• HorizontalCell: при size="m" фиксированная ширина заменена на максимальную ширину как при size="s" (#6318)
• Некоторые булевые пропы по умолчанию теперь falsy
  • PanelHeader: visor заменён на float, separator заменён на delimiter (#6277)
  • ModalPanelHeader: separator заменён на noSeparator (#6277)
  • Avatar: withBorder заменён на noBorder (#6286)
  • CardScroll: withSpaces заменён на noSpaces (#6286)
  • CustomSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
  • Image: withBorder заменён на noBorder (#6286)
  • ImageBase: withBorder заменён на noBorder (#6286)
  • Gallery: isDraggable заменён на dragDisabled (#6286)
  • GridAvatar: withBorder заменён на noBorder (#6286)
  • Placeholder: withPadding заменён на noPadding (#6286)
  • PopoutWrapper: hasMask заменён на noBackground (#6286)
  • Select: fixDropdownWidth заменён на dropdownAutoWidth (#6286)
  • Tabbar: shadow заменён на plain (#6286)
  • ChipsSelect: fixDropdownWidth заменён на dropdownAutoWidth (#6286)

Команда VKUI поздравляет всех с наступающим Новым Годом 🎉

Увидимся в следующем году 😎

Исправления после релиза v6.0.0-beta.1

• Был сломан SSR из-за ошибки при определении appearance (#6243)
• Поправили проблему с прыгающими модальными окнами (#6276)
• Актуализировали наш основной README.md (#6257)
• View: починили страницу с документацией (#6269)
• В содержание страницы Миграция с v5 на v6 добавили подзаголовки (#6275)

Breaking changes

[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6 (страница миграции обновлена).

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

• Удалили компонент FormLayout, используйте нативный form (#6302)
• ModalCard: удалили стили, задающие отступы через каскад, теперь отступ, при необходимости, надо выставлять самостоятельно через Spacing (#5419)
• PopoutWrapper: поправили проблему с не скролящимся контентом (#6265)
• AppRoot: теперь при mode="embedded класс с названием темы навешивается на ближайший контейнер AppRoot, а не на <body>. Также при mode="full" классы vkui и vkui--* навешиваются на <html> вместо <body> (#6263, #6279)

[!NOTE]
Полный список изменений смотрите в документации по миграции с v5 на v6.

Там же можно найти информацию про VKUI v6 Codemods, который должен упростить переход на новую мажорную версию.

Breaking changes

[!WARNING]
Это мажорные изменения в рамках текущей беты. В ближайшее время будет ещё несколько таких изменений.

Зависимости

• Обновили минимально поддерживаемую версию React до v18.2.0.

• Удалили зависимость @vkontakte/vk-bridge в рамках задачи по уменьшению сцепления с VK Mini Apps.

  Для авторов VK Mini Apps, совместно с командой VK Dev, создали страницу Интеграция с VK Mini Apps.

  Команда VK Dev, для будущих авторов, отредактировала раздел VK Dev / Библиотеки / VKUI и продублировала ссылку на нашу страницу интеграции.

Сборка

• Обновили конфигурацию .browserlistrc:

  - android >= 5
  + ChromeAndroid >= 57
  - iOS >= 10
  + iOS >= 10.3
  - Chrome >= 51
  + Chrome >= 57
  Firefox >= 54
  Edge >= 18
  - Opera >= 38
  + Opera >= 44
  - Safari >= 10
  + Safari >= 10.1
  
  + Samsung >= 7.2
  

• В отдельной сборке теперь используется CSS Logical.

  Это изменение влияет только на пользователей, использующих специальную сборку. Такие пользователи, при необходимости, должны использовать плагин postcss-logical, чтобы продолжать поддерживать старые версии браузеров.

Компоненты

• Переработали API многих компонентов. Например, API изменилось у компонентов, которые наследуются от Tappable
• Провели работы по улучшению доступности, которые требовали мажорных изменений.
• Сделали стабильными компоненты:
  • ChipsSelect
  • HorizontalCellShowMore
  • Popover
  • Popper
  • TextTooltip Tooltip

    Предыдущий Tooltip (v5) переименован в OnboardingTooltip

Фидбек ❤️

Для очевидных багов создавайте issues. Для всех остальных обсуждений есть дискуссии :)

Улучшения

• Snackbar: добавили подкомпонент Snackbar.Basic – это тот же Snackbar, но только вёрстка, без логики (#5932)
• HorizontalCell: теперь принимает все параметры Tappable (#5918)
• Avatar: добавлена функция Avatar.getInitialsFontSize для определения размера шрифта в аватарах (#5923)
• Image:
  • добавлена возможность задавать прозрачный фон с помощью параметра withTransparentBackground. Полезно для отображения картинок с прозрачностью. (#5924)
  • добавленны свойства widthSize и heightSize (#5682)
• SegmentedControl: Добавили возможность добавлять иконку с помощью свойства before (#5959)
• Gradient: добавили новый mode=default, который позволяет подстраиваться под текущую тему (#5827)
• Radio: добавили новыйп проп labelProps для того чтобы можно было передавать data-* аттрибуты лэйблу, в который обёрнут инпут. Основная цель - позволить в e2e-тестах находить именно лейбл. (#6037)
• ModalRoot: новое свойство modalOverlayTestId для передачи data-testid на оверлей (#6052)
• ModalPage, ModalCard: новое свойство modalDismissButtonTestId для передачи data-testid на оверлей (#6051)
• Cell: добавили авто-скролл для draggable режима (#5833)
• ModalCard: новое свойство dismissButtonMode для возможности показать крестик закрытия внутри модальной карточки (#6068)
• CustomSelect, ChipsSelect: новое свойство noMaxHeight для отображения выпадающего меню без скролла (#6045)
• Select/CustomSelect: сделали компонент доступным для скринридеров на десктопах (#6087)
  Рекомендации по использованию компонента для улучшения доступности можно найти в документации по компоненту в разделе "Цифровая доступность (a11y)".
  Были внесены изменения во внутреннюю реализацию компонента, в результате чего e2e-тесты, могут сломаться.
  Рекоммендации по e2e-тестированию компонента можно найти в разделе "Тестирование (e2e)" документации компонента.
  Также поменялся тип ноды, которую можно получить через свойство getRootRef, c HTMLLabelElement на HTMLDivElement.
• Calendar: параметры minDateTime/maxDateTime позволяют запретить выбор определенных дат с учетом времени (#5866)
• Search: добавлена кнопка "Найти" справа как в дизайн-системе (#5790)
• Tabs:
  • добавлен автоскролл до выбранного таба (#5957)
  • добавлено свойство layoutFillMode для возможности управления растягиванием/сжатием вкладок (#6114)

Исправления

• AppRoot: не вызывался useInsets(), если не передан safeAreaInsets (#6071)
• TabsItem: теперь status={0} отображается корректно (#6125)
• Переделали реализацию :focus-visible-состояния, чтобы больше не появлялся скролл в родительском элементе (#5876)

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

• Добавили в шапку ссылки на токены и иконки (#6048)
• View: добавили информацию о важности порядка Panel (#6046)

Other

• withInsets помечен как @deprecated и будет удалён в v6 – используйте useInsets() из @vkontakte/vk-bridge-react (#6071)

Зависимости

• Обновили @vkontakte/vkjs с 1.1.0 до 1.1.1 (#6122)
• Обновили @vkontakte/vkui-tokens с 4.41.1 до 4.41.2 (#6098)
• Обновили @vkontakte/vkui-floating-ui с 0.1.0 до 0.1.2 (#6109)

[!IMPORTANT]
Как сообщалось в Release notes v5.9.4, мы приступили к разработке v6, поэтому это финальная минорная версия VKUI v5. В дальнейшем мы будем править критические проблемы.

Исправления

• ModalPage/ModalCard: при открытии фокусируемся на контейнер ModalPage/ModalCard, если внутри модалки нет элемента, на котором уже есть фокус (#6054)
• Select/CustomSelect: исправили типы рендер-функции renderOption, чтобы можно было передавать опции с раширенным набором свойств (#6076)

Исправления

• Alert: кнопка закрытия съезжала вниз (#6035)
• ConfigProvider: передача параметра platform={undefined} перебивала значение по умолчанию из контекста (#6044)

Исправления

• Исправили наведение, если устройство ввода не основное (#6009)
• ModalPage: поправили поведение в мобильном iOS, раньше жестом, при закрытии модалки, можно было вызвать нативный pull-to-refresh ведущий к перезагрузке страницы. Используем overscroll-behavior: none на html при открытой модальной странице, чтобы исключить возможность появления нативного pull-to-refresh в браузерах, поддерживающих свойство overscroll-behavior. (#6004)
• PullToRefresh: как и в ModalPage дополнительно используем overscroll-behavior: none на html, чтобы в браузерах, поддерживающий свойство overscroll-behavior, исключить вызов нативного pull-to-refresh. (#6004)
• Уменьшили размер бандла (#6030)

[!IMPORTANT]
Мы приступаем к разработке v6, поэтому начиная с версии v5.10.0 будет отдаваться приоритет новой мажорной версии. По VKUI v5, по возможности, будем править только критические проблемы.

Исправления

• CustomSelect: исправлена типизация. option всегда передается в renderOption (#5973)
• ActionSheet: убрали неверный тег header (#5966)
• HorizontalScroll: убрали стрелки для скринридера (#5969 by @ntvsx193)
• Header: убрали неверный тег header, поправили доступность (#5996 by @ntvsx193)
• Alert: добавили word-break: break-word для header и text (#5966)
• PullToRefresh: поправили поведение в мобильном iOS, раньше жестом довольно легко можно было вызвать нативный pull-to-refresh ведущий к перезагрузке страницы (#5967)

Исправления

• Добавлен getRootRef на недостающие элементы (#5916)
• Исправлена проблема с поддержкой старых браузеров (указанных в нашем .browserslistrc) (#5913)
• Snackbar: исправлено закругление (#5944)
• CustomSelect: исправлена типизация свойства renderOption (#5950)
• PanelHeaderButton: исправлены отступы на ios (#5878)
• Button: убрали лишний отступ при параметрах before/after и stretched (#4049)
• Gallery: исправлена работа looped в связке с timeout (#5951)

Исправления

• Group: Исправлены отступы заголовка для mode=plain (#5906)
• HorizontalScroll: исправлена работа в RTL (#5837)

Улучшения

• Добавили хук useNavId для определения id панели (#5743)
• ActionSheetItem: добавили свойство after (#5828)
• ActionSheet: добавили свойство mode: 'sheet' | 'menu', позволяющее переключать режим отображения (#5829)
• Alert: добавили возможность отрисовать кнопку закрытия внутри компонента (#5663)
• Avatar, Image: теперь могут быть кликабельными (#5803)
• Button: добавили свойство rounded (#5648)
• Cell: добавили возможность обрабатывать клик по компоненту Cell в режиме removable (#5745)
• FormLayoutGroup: поддержали режим segmented при mode="vertical" (#5802)
• ModalPage: добавили возможность устанавливать фиксированную высоту модального окна с помощью свойства height (#5830)
• Tappable: добавили свойство activated (#5826)
• Добавили возможность передавать data-testid там, где это раньше было невозможно (#5792):
  • Alert: добавили возможность передаваться data-testid компонентам отечающим за действия внутри Alert через элементы actions.
  • ModalPageHeader/PanelHeader: добавили возможность передавать data-testid обертке вокруг основного текста ModalPageHeader через typographyProps.
  • ModalPage: новый проп modalContentTestId, устанавливающий data-testid на обёртку вокруг контента ModalPage, отвечающую за скролл внутри модального окна.
• Gallery: добавили проп looped для возможности работы галереи в режиме карусели (#5744)
• Header: доработали aside часть компонента для выравнивания контента (#5681)
• Увеличили зону триггера SwipeBack (#5725)
• ScrollArrow: добавили пропу direction возможность задать up и down (#5839)
• Импортируем проп FloatingPlacement (#5809)

Исправления

• Button: исправили токен шрифта в компоненте Button (#5885)
• CellButton/SimpleCell: поправили селекторы отвечающие за цвет иконок в элементах before/after, за счёт понижения специфичности и избавления от привязки к .vkuiIcon классу. (#5873)
• HorizontalCell: больше не рендерим обертку контента .HorizontalCell__content если внутри пусто (не переданы header/subtitle/extraSubtitle (#5884)
• ModalPage: починили скролл при повторном открытии модалки на весь экран (#5845)
• View: добавили затемнение следующей панели при свайпбеке в iOS (#5804)
• Panel: исправлен фон при AppRoot layout="card" (#5804)
• Link: добавили font-weight: inherit (#5902)
• ⚠️ убрали overflow-x: hidden у body, так как это ломает библиотеки (react-virtualizer), реализующие виртуальные списки и вешающие обработчик события scroll на window. (#5890). Рекоммендуем пользователям библиотеки самим выставлять overflow-x: hidden на body, если это действительно нужно по какой-то причине.

Internal

• Обновили @vkontakte/vkui-tokens до 4.38.1 и поддержали динамические токены --vkui--size_border--regular и --vkui--color_separator_primary (#5783, #5791)
• Включили опцию declarationMap и добавили TypeScript исходники для пакета @vkontakte/vkui, что позволяет при переходе к определению (go to definition) направлять в .ts файл, а не .d.ts (#5748)

Исправления

• ActionSheet: исправлен отступ у тени на платформе iOS (#5797)
• Banner: исправлен внутренний отступ (#5824)
• CardScroll: исправлен тип кнопок навигации, чтобы не вызывать внутри формы при нажатии событие отправки (#5863)
• Checkbox: компонент без текста растягивался на всю ширину (#5786)
• Group: исправлено расположение элементов, которые находятся в header (#5799)
• ModalCard: исправлено исчезновение overlay при достаточно быстром переключении между ModalCard (#5805)
• Popper: исправлено позиционирование при первом рендере. Раньше появлялся по координатом (0,0), после чего перерисовывался правильно (#5822)
• SimpleCell: исправлены отступы внутри компонента (#5794)
• WriteBar: исправлено "прыгающее" поведение (смещение) иконок и кнопок во время ввода текста (#5836)

Исправления в документации

• FixedLayout: зафиксировали PanelHeader в документации FixedLayout для всех платформ (#5843)
• MiniInfoCell: убран лишний разделитель из документации (#5844)
• PanelHeaderButton: исправлены ссылки на документацию из компонентов пресетов PanelHeader (#5851)

Исправления

• ⚠️ Неверное название переменной окружения ломало сборку в vite (#5766)
• ModalDismissButton: поправлено исчезновение кнопки закрытия в примере из документации (#5764)
• TabbarItem: применили токен для текста как в дизайн-системе (#5750)

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

• ActionSheet: поправили ссылку на документацию Apple для разработчиков (#5768)

Улучшения

• Поддержали getRootRef на всех компонентах (#5651)
• ActionSheet: добавили информацию об инициаторе закрытия ActionSheet в ActionSheet.onClose (#5597)
• Slider: добавили возможность включения тултипа при наведении/фокусе показывающего значение слайдера (#5472)
• FormItem: добавили возможность отключения внешних отступов с помощью пропа noPadding (#5600)
• Tappable: добавили свойство borderRadiusMode для возможности унаследовать радиус скругления от родителя (#5619)
• useNavDirection(): добавили хук для определение типа перехода (вперёд/назад), с которым была отрисована панель (#5567)
• Typography: для тега <b> в типографических компонентах теперь выставляем font-weight: var(--vkui--font_weight_accent1); (#5622)
• Placeholder: добавили подкомпоненты (#5629)
• AppRoot:
  • добавили свойство layout, отвечающее за вид Group (#5642)
  • добавили свойство disableParentTransformForPositionFixedElements , отключающее создания нового слоя для position: fixed элементов при mode="embedded" (#5692)
• Group: изменили вид карточек в мобильной версии (#5720)
• Card: добавили режим отображения outline-tint (#5533)
• Input: отключили нативные элементы для <input type="number" /> при передаче type="number" (#5607)
• ChipsSelect/CustomSelect: экспортировали filterFnForSelect (defaultFilterFn из lib/select) (#5601)

Исправления

• ConfigProvider: ConfigProvider больше не удаляет из body добавленные другими приложениями классы при размонтировании. (#5633)
• ModalPage: скролл внутри модальной страницы теперь заканчивается на границе с ios env bottom inset. (#5715)
• TextTooltip/Popper: добавили проп hideWhenReferenceHidden, чтобы тултип не прыгал, а сразу автоматически скрывался при исчезновении элемента, к которому тултип привязан. (#5690)
• Checkbox, Root: исправили классы (https://github.com/VKCOM/VKUI/pull/5737)
• ChipsInput/ChipsSelect: привели типографику к дизайн-системе (https://github.com/VKCOM/VKUI/pull/5695)
• Удалили font-smoothing (#5739)

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

• Добавили ссылки на Storybook для всех компонентов (#5694)
• MiniInfoCell: убрали из документации свойство textLevel, которого нет в интерфейсе компонента (#5736)

Internal

• Обновили @vkontakte/vkui-tokens с 4.35.1 до 4.36.0 (#5580)
• Обновили @floating-ui/react-dom с 2.0.1 до 2.0.2 (#5735)
• Перенесли @vkontakte/icons в прямые зависимости (#5718)

Important

В связи с переносом @vkontakte/icons в прямые зависимости вы можете столкнуться с дублированием зависимостей. Если это случилось, не паникуйте: на помощь придет дедупликация.

npm

Команда npm dedupe

npm dedupe

Yarn Classic

Утилита yarn-deduplicate

npx yarn-deduplicate --packages @vkontakte/icons

Yarn Modern

Команда yarn dedupe

yarn dedupe @vkontakte/icons

pnpm

Команда pnpm dedupe

pnpm dedupe

Подготовка к удалению интеграции с VK Bridge (#5496)

VKUI создавался как инструмент для создания клиентской части мини-приложений ВКонтакте. В связи с этим VKUI изначально интегрирован с библиотекой VK Bridge, которая реализует общение между VK Mini Apps и официальными клиентами ВКонтакте.

Сегодня разработчики используют VKUI, чтобы создавать полноценные независимые приложения, которые никак не связаны с VK Mini Apps, но наследие остается, и иметь с ним дело приходится всем. Поэтому мы приняли решение удалить интеграцию с VK Bridge, начиная со следующей мажорной версии (v6).

В рамках этого релиза в качестве подготовки к удалению интеграции мы:

• добавили советы по подготовке к обновлению на v6 в документации и в предупреждениях в консоли разработчика (☝️ если вы не разработчик VK Mini Apps, просто игнорируйте эти советы);
• создали страницу Интеграция с VK Mini Apps, которая содержит всю информацию об интеграции VKUI с VK Mini Apps в новых реалиях.

Исправления

• SimpleCell: вернули применение margin-top (#5574)
• HorizontalScroll: поправили отображение стрелок при рендере после display: none(#5595)
• PanelHeaderClose: поправили перекрытие контентом модалки (#5605)
• Group: убрали лишний отступ, который появлялся у последнего Group с пропром separator="show"(#5623)
• Avatar/Image: поправили поведение компонента при SSR, когда изображение загружено до инициализации react, в результате чего обработчик события load не вызывается и компонент имеет не верное состояние (#5602)
• SelectMimicry/CustomSelect: исправлен autoFocus (#5665, #5662)
• Исправлен двойной ререндер при передаче контекста (#5666, #5668)
• Placeholder: не растягивался на высоту блока (#5669)
• ChipsSelect: исправлена работа свойства showSelected, теперь выбранные опции не убираются из списка при showSelected=true (по умолчанию true) (#5684)
• ModalPage:
  • Исправили расчёт первоначальной высоты в мобильном виде, в случае, когда внутри рендерился Select (#5606)
  • Исправили абсолютное позиционирование внутри ModalPage (#5676)
• Banner: цвета иконок, а также иконка закрытия для iOS, не соответствовали дизайну (#5637)
• ActionSheet: компонент невозможно было закрыть на широком экране (#5641)
• Image: применялись неправильные закругления (#5672)
• Checkbox: не работал text-overflow: ellipsis на children (#5672)
• MiniInfoCell: исправлен отступ если отсутствует before (#5696)

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

• Удалили лишнюю информацию в документе Миграция с v4 на v5 (#5592)

Исправления

• Не работали анимации и переходы между панелями (#5564)