Исправления

• PanelHeaderContext: если контекст был изначально скрыт, наблюдалась блинкуюущая менюшка (#7193)
• Popover:
  • при trigger={['focus', 'click', 'hover']} событие onMouseLeave игнорировалось в случае, если триггером выступал focus или click, что приводило к путающему поведению (#7170)
  • при trigger="hover" и динамическом изменении контента в Popover, глючило состояние открытия/закрытия (#7199)
• ModalPage: ломалась анимация открытия/закрытия (#7147)
• Snackbar: в мобильной версии при placement="bottom-start"/placement="bottom"/placement="bottom-end" компонент всегда появлялся снизу-верх и ��акрывался через смахивание вниз, что приводило к тому, что вызывался pull-to-refresh и/или режим одного пальца. Чтобы избежать этих проблем, теперь компонент всегда будет появляться слева-направо и смахиваться в то же направление (#7135)
• ChipsSelect: список опций не открывался по клику на иконку со стрелкой (#7167)
• Search: на iOS запаздывала анимация кнопки Отмена (#7196)

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

• Исправлена навигация из styleguide в storybook (#7047)
• Актуализированы страницы DateRangeInput и CustomSelect (#7189, #7197)
• На странице Кастомизация поправлен пример импорта иных тем (#7205)

Зависимости

• @vkontakte/vkjs обновлён с 1.2.0 до 1.2.1 (#7186)

Исправления

• CustomSelect:
  • не переносилась неразрывная строка (#7092)
  • наведение работало неверно (#7126)
  • вернули скролл к выбранному элементу при открытии выпадающего окна (#7131)
• ChipsInput: не прокидывались disabled-состояния (#7098)
• Popover: возвращён параметр customMiddlewares (#7134)
• CustomScrollView: в v6.1.2 появилась дополнительная обёртка над children – в ней не хватало стилей для растягивания её на всю высоту (#7097)
• Компоненты, наследующие Typography, использовали только системную тему (#7090)
• Исправление ошибки TypeError: Uncaught TypeError: Cannot read properties of undefined (reading 'shown') (#7099)
• ModalDismissButton: вернули hover и active состояния (#7082)
• GridAvatar: исправили key ��ля одинаковых ссылок в src (#7146)
• Image: исправили некорретное поведение ImageBase.Overlay для вложенных интерактивных элементов (#7006)

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

• Snackbar: исправили описание жестов для закрытия (#7120)

Новые компоненты

DisplayTitle

Типографический компонент, который используется для крупных заголовков (#7003)

Flex

Базовый компонент для позиционирования элементов. Построен на базе flex layout (#6226)

Улучшения

Accordion

Экспортирован тип AccordionContentProps (#6990)

ActionSheet

Добавлена анимация появления/скрытия на десктопе (#6979)

AppRoot

Добавлено новое свойство userSelectMode для управления режимом выделения текста в приложении (#7005)
По умолчанию теперь выделение текста запрещено, если приложение запущено с флагом isWebView в ConfigProvider

ChipsSelect

• Добавляем свойство dropdownOffsetDistance как у CustomSelect (#6976)
• Добавляем свойства onOpen и onClose для событий открытия/закрытия выпадающего элемента

CustomSelect

Экспортирован тип CustomSelectClearButtonProps (#6985)

HorizonalCellShowMore

Для цвета теперь используется токен --vkui--color_text_secondary вместо --vkui--color_icon_secondary (#7040)

Popover

Добавлен параметр keepMounted (#7058)

Slider

Визуально добавлены состояния active и hover (#7014)

Switch

Дизайн приведён к виду Material 3 (#6957)

В связи с этим, в документации поправили переключатели на чекбоксы

Caption / DisplayTitle / EllipsisText / Footnote / Headline / Paragraph / Subhead / Text / Title

Добавлен параметр inline – теперь можно перебить display: block, который выставляется при normalize={true} (#7059)

Заменен цветовой токен применяемый для модальных окон в не модальных компонентах

Изменен цвет фона в следующих компонентах (#7044):

• Card
• Calendar
• CalendarRange
• CustomSelectDropdown (под-компонент CustomSelect)
• Popover
• ScreenSpinner
• ScrollArrow
• SubnavigationButton
• TabsItem
• TooltipBase
• WriteBar

Упрощение анимаций при @media screen and (prefers-reduced-motion: reduce)

В частности, в зависимости от prefers-reduced-motion, анимации с перемещением и с изменением размеров теперь заменяются на анимации через прозрачность там где необходимо. Благодаря такому подходу пользователи, с проблемами с вестибулярным аппаратом, смогут пользоваться вашими приложениями без спецэффектов (#6979)

Popper/FloatingArrow

Меняется логика статического позиционирования (свойство isStaticOffset из arrowProps) стрелочки попапа FloatingArrow, указывающей на целевой элемент.
Раньше при статическом позиционировании горизонтально или вертикально, независимот от значения placement, точкой отсчёта отступпа offset являлся либо левый край попапа при горизонтальном позиционировании, либо верхний край при вертикальном позиционировании.
Теперь, если свойство placement заканчивается на -end (top-end, right-end и т.д), offset отсчитывается от противоположного края: правого при горизонтальном позиционировании, нижнего при вертикальном позиционировании. (#7079)

Подняли версию @vkontakte/vkui-tokens до 4.47.0 (#7024)

Подняли версию @vkontakte/vkjs до 1.2.0 (#7055)

Исправления

Accordion

Если контент динамический, то он обрезался пока не вызовешь резайс страницы или пока не перезагрузишь страницу (#7083)

ActionSheet

Исправлена доступность ActionSheet в виртуальном буфере скринридера NVDA (#6955)

Alert

Переставал работать action с опцией autoClose={true} (#6979)

Calendar/CalendarRange

• При изменении месяца через select выбранный месяц появлялся не на той же половине где был вызван select (#7074)
• В селектах выбора месяца и года опции, не входящие в разрешенный диапазон дат (ограниченный через свойства minDateTime, maxDateTime, disablePast, disableFuture), будут неактивны (disabled) (#6937)
  Спасибо @struchkov 👍!

Header

Удалено принудительное разрешение выделение текста с помощью user-select. (#7005)

PanelHeader

Не пересчитывался размер компонента при использовании колонок (#7073)

Tappable

Убрано использование will-change: transform, так как не исправляет проблем с border-radius на iOS, но добавляет нагрузки браузеру (#7080)

Link

Исправляем поведение Link внутри контейнера с переполнением. Раньше он не прятался вместе с контентом в Safari (#7088)

source-map для CSS

После обновления PostCSS до 8.4.38 при импорте файлов со стилями из @vkontakte/vkui:

@import 'node_modules/@vkontakte/vkui/dist/components.css';
/* или */
@import 'node_modules/@vkontakte/vkui/dist/vkui.css';

в консоль начали сыпаться предупреждения из-за не валидного source-map для CSS:

original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values. 

поправили их генерацию (#7034)

Исправления

• CustomScrollView: при изменении контента не пересчитывался трекер (#7060)
• Popover: исправили некорректное поведение при использовании массива значений в trigger (#6915)
• FocusTrap: при динамическом изменении children не обновлялся буфер с интерактивными элементами для фокуса, из-за чего на новые элементы фокус не попадал (#7041)
• Select: исправлен двойной рендер компонента (#7011)
• Spacing: не применялся числовойsize (#7035)
• Tappable: состояния вложенных Tappable могли не сбрасываться (#7029)
• ToolButton: при ширине >= 768px у иконки без передачи children появлялся лишний отступ (#7039)

Исправления

• Cell: в режиме draggable прекращался автоскролл при выходе мышки за область видимости (#6971)
• SplitLayout: свойство center не работало (#6987)
• DatePicker: исправили сброс значений неконтролируемого компонента (#6978)
• Textarea: скролл не был скруглен (#6993)
• Исправили падение сборки из-за использования React.use с версией react: 18.*.* (#7008)

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

• Button: были проблемы переключении параметров (#6968)

Новые компоненты

Skeleton

Долгожданный скелетон (#5941).

DropZone

Компонент позволяет пользователям загружать файлы, перетаскивая файлы в область на странице (#6807).

Mark

Используется для выделения фрагментов текста, например, при поиске определенных слов или выделения текста в цитате (#6310).

ContentBadge

Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются поверх других элементов или рядом с ними (#6636).

ToolButton

Кнопки, которые используются для вызова инструмента, вставки аттачей или для форматирования. Их можно использовать как кнопки для разового действия или для включения/выключения режима (#6837).

EllipsisText

Убирает текст не помещающийся в ширину контейнера в многоточие (#6692, спасибо @akcent1132 ❤️).

UnstyledTextField

Компонент предоставляет обёртку над <input />/<textarea /> со сбросом браузерных стилей по умолчанию (#6720).

Улучшения

Новая трансформация JSX

Для будущей поддержки React 19 библиотека компилируется используя новую трансформацию JSX (#6873).

Alert

Если action имеет свойство autoCloseDisabled, то в аргументы функции action() передётся метод close(), который можно вызвать, чтобы вручную закрыть Alert при клике на action (#6728).

Badge

Теперь параметр mode необязателен (#6947).

Cell.Checkbox

Добавлена возможность изменения размера компонента (#6438).

ChipsInput / ChipsSelect

Добавлена поддержка сброса новых значений до значений по умолчанию <form_dom_element>.reset() или <input type="reset" /> (#6563).

DatePicker / Popper / Popout

Теперь onPlacemenChange при первом рендере вызывается корректно (#6906).

FormItem

• Добавлена поддержка для многострочного вывода для текста top с помощью свойства topMultiline (#6582, спасибо @ntvsx193 ❤️).

• Добавлено отображение required-индикатора (#6820).

• Добавлено свойство topNode (#6730).

  

Group

Уменьшен отступ между Group и увеличен border-radius (#6769).

HorizontalScroll

Добавлено свойство inline для возможности располагать потомков горизонтально (#6848).

Image.Badge / Avatar.Badge

Поддержано больше свойств для передачи на корневой элемент (#6493).

ModalPage / ModalCard

Добавлена возможность запрещать скрытие модальные окна (обратите внимание, что это негативно сказывается на пользовательском опыте) (#6116)

Pagination

• Добавлена возможность менять режим отображения кнопок навигации с иконками налево/направо:

  

  Используйте для этого параметр navigationButtonsStyle (#6630).

• Добавлены Render Props renderPageButton и renderNavigationButton (#6781, спасибо @rflban ❤️).

Panel

Добавлено свойство mode: 'card' | 'plain', чтобы иметь возможность менять фон Panel. Удобно использовать вместе со свойством mode у компонента Group, позволяет точечно задавать стиль оформления Group, отличный от глобального стиля макета. (#6678)

PanelHeaderBack

Для platform="vkcom" иконка изменена на chevron_left_outline_20, а цвет на icon_secondary (#6941).

Popover

Добавлены свойства: arrow, arrowPadding, arrowHeight, arrowProps, ArrowIcon – для возможности добавлять стрелку (#6725)

Popover / Popper / OnboardingTooltip / Tooltip

Добавили свойство disableFlipMiddleware для возможности отключать автоматическое переопределение placement в зависимости от области видимости (#6922)

Radio

Добавлена возможность переопределения hoverMode и activeMode (#6455).

Snackbar

• Добавлено свойство placement?: 'top-start' | 'top' | 'top-end' | bottom-start' | 'bottom' | 'bottom-end' определяющее положение плашки – в мобильной версии *-start и *-end игнорируются и работают как top/bottom (#6806)
• Добавлено закрытие на ESC, а также добалены атрибуты role для a11y (#3039)
• Отступ у action приведён к дизайну (#6659, спасибо @akcent1132 ❤️)

Spacing

К свойству size добавлена возможность передавать строковые значения размеров, соответствующие размерам из системы расстояний (#6684, #6925)

SplitLayout

Добавлено свойство centered – теперь не придётся руками объявлять CSS в style для центровки (#6951)

Slider

Добавлено свойство size?: 's' | 'm' | 'l' определяющее размер ползунка (#6819)

TabsItem

• Поддержаны свойства ссылок (#6439).
• Добавлена возможность переопредел...

Исправления

• TabsItem: убрали прозрачность для mode=secondary (#6809)
• ActionSheetItem: исправили отступы (#6813)
• SegmentedControl: исправили зависание hover-состояния на смартфонах (#6818)
• Button: вернули анимацию при смене фона и цвета шрифта (#6880)
• Link: обнулили свойство text-align, т.к. при пустом href компонент использует тэг <button>, которому браузер по умолчанию выставляет text-align: center (#6881)
• SimpleCell: нормализовали отступ от иконки на платформе iOS (#6829)

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

• Основная документация (Styleguide)
  • Добавили пример для демонстрации случая, когда в ActionSheetItem не передавали параметра autoClose (#6876)
  • Исправили работу выпадающих списков в документации (#6800)

Улучшения

• 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)
    • Tappable (#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)
  • исправили некорректную высоту плавающего элемента (#6571)
• 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)

Оптимизация

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