v6.4.1

Исправления

• List: исправлено выпадение контента за пределы родителя (#7278)
• ChipsSelect: исправлено появление повторяющихся ключей (key) при рендере options, если есть опции с одинаковым значением option.label (#7276)

v6.4.0

Улучшения

Tooltip

Добавили новой свойство disableTriggerOnFocus, чтобы запретить появление тултипа при фокусе (#7267)

ChipsSelect/ChipsInput/FormField

Добавили новое свойство maxHeight, чтобы контролировать максимальную высоту компонента, после которой появляется скроллбар (#7124)

Snackbar

В мобильном режиме bottom-end больше не перебивается на bottom-start. Также теперь можно закрыть Snackbar свайпом в любое из направлений по горизонтали (#7265)

ScreenSpinner

• добавлены подкомпоненты: ScreenSpinner.Container, ScreenSpinner.Loader, ScreenSpinner.SwapIcon (#7250)
• исправлен фокус на компоненте в режиме state="cancellable" (#7250)

v6.3.1

Исправления

• CustomSelect: исправлено поведение в режиме searchable. После поиска по опциям по клику выбиралось не то значение (#7226)
• Cell: по умолчанию, при передаче href, компонент должен использовать тег a (#7242)
• ModalDismissButton: изменён токен состояний hover и active и сами состояния теперь задаются через background-color (#7243, спасибо @qurle!)

Улучшения

Popover

Добавлен параметр onShownChanged, который работает как onShownChange, но при этом дожидается окончания анимации.

v6.3.0

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

SimpleGrid

Добавлен новый компонент для раскладки элементов, на базе grid (#6233 )

Улучшения

AspectRatio

Добавили возможность переопределять свойство Component (#7148)

FormItem / Radio / RadioGroup

Доработали цифровую доступность для компонентов (#7089)

• У FormItem появился параметр topId для указания атрибута id у <label />
• У RadioGroup теперь объявлена роль role="radiogroup"
• На страницах Radio и RadioGroup добавили раздел Цифровая доступность

EllipsisText

Добавлен параметр maxLines (#7091)

CustomSelect

Добавлен параметр getSelectInputRef для получения ссылки на элемент <input /> (#7118)

Image

Добавлен параметр objectFit для изменения стиля object-fit у картинки (#7123)

Добавлено свойство keepAspectRatio для сохранения оригинальных пропорций картинки (#7187)

Добавлены параметры borderStartStartRadius, borderStartEndRadius, borderEndStartRadius и borderEndEndRadius для скругления отдельных углов (#7100)

CustomScrollView, CustomSelect, ChipsSelect

Добавлен параметр overscrollBehavior для возможности изменения стиля overscroll-behavior у компонента CustomScrollView (#7111)
Теперь в CustomSelect и в ChipsSelect можно прокинуть параметры autoHideScrollbar и autoHideScrollbarDelay
(#7151)

ChipsSelect

Добавлена кнопка очистки.
Свойства:

• allowClearButton, для отображения кнопки очистки
• ClearButton для возможности переопределить кнопку очистки.

Checkbox

Добавлен раздел Цифровая доступность в документации (#7101)

List

Добавлен параметр gap для установки промежутка между элементами. (#7094)

HorizontalCellShowMore

Добавил параметр centered. При передаче которого, компонент выравнивается по центру по вертикали относительно родителя (#7110)

Cell/SimpleCell/MiniInfoCell/RichCell

Используем токены расстояний вместо числовых констант (#7033)

Panel

Добавлено свойство disableBackground, которое отключает фон

UsersStack

Теперь вместо массива ссылок photos можно передать массив с функциями рендера обертки над аватарками. Это нужно для добавления дополнительных элементов или тултипов над аватаркой (#7116)

Separator

Добавлен prop mode для управления стилем отображения компонента (#7149)

FormLayoutGroup

Улучшена цифровая доступность компонента:

• по умолчанию используется fieldset вместо div
• Добавлен раздел "Цифровая доступность" в документацию компонента
  (#7155)

Search

Расширена возможность прокидывания prop icon в компонент Search. Теперь можно удобно добавлять обертку для компонента. Пример в документации
(#7176)

Textarea

Добавлены параметры before и after для компонента TextArea (#6307)

FormField

Добавлены параметры afterAlign и beforeAlign для выравнивания иконок по вертикали (#6307)

Snackbar

Цвет фона изменен на токен colorBackgroundContrastThemed (#7211)

Gradient

Добавлен новый режим mode="overlay" (#7236)

Исправления

• Анимация заднего фона у модальных окон не срабатывала (#7232)
• View: открытие панели из модалки с клавиатурой сохраняло неверное положение скролла (#7208)
• TabsItem: был неверный цвен фона при наведении (#7233)
• Flex: приоритет flexBasis был выше чем в свойстве style (#7240)

v6.2.2

Исправления

• 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)

v6.2.1

Исправления

• 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)

v6.2.0

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

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)

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

Warning

Изменились размеры компонента:

• 38x18 → 42x26 при SizeType.COMPACT
• 40x20 → 52x32 при SizeType.REGULAR

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)

v6.1.2

Исправления

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

v6.1.1

Исправления

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

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

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

v6.1.0

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

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).
• Добавлена возможность переопредел...