Исправления

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

Улучшения

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

Исправления

• SimpleGrid: gap по умолчанию 0 (#9449)
• ModalCard: Исправлена анимация открытия/закрытия (#9447)
• Touch: События onStart, onEnd могли два раза вызываться на Android (#9446)

Исправления

• Не все свойства, которые должны пробрасываться через корневой элемент, были объявлены в типах, в частности, это касается Input (не хватало min, max) (#9444)

• Улучшена производительность компонентов связанных с датами и временем за счёт кеширования инициализации объекта Intl (#9340)

• Из-за отказа от happy-css-modules, именование всех CSS классов переведёно в camelCase формат (#9355)

• Для возможности использовать scroll-snap-type, ещё немного обновили версии поддерживаемых браузеров (#9377)

  - ChromeAndroid >= 68
  + ChromeAndroid >= 69
  
  - Chrome >= 68
  + Chrome >= 69
  
  - Samsung >= 9
  + Samsung >= 10.1

• Удалена зависимость uuid, т.к. не подходит по браузерной поддержке (#9443)

Улучшения

• Button: добавлено свойство elevation для тени (#9379)

  

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

• Для раздела Компоненты в боковом меню добавлена клавиатурная навигация (#9354)
• Исправлена проблема моргания главной страницы (#9378)
• FixedLayout:
  • Исправлена ссылка на документацию Box (#9382)
  • Исправлен пример миграции для <FixedLayout vertical="bottom" /> (#9382)
• Tooltip: В примере был неверный закрывающий компонент (#9404)
• useModalManager: Исправлена ссылка на исходник хука (#9432)

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.71.0 до 4.72.0 (#9370)

Исправления

Поправлены трансформации под slotProps в компонентах: Switch, Checkbox, Radio, File, CustomSelect, NativeSelect, Select, Textarea, WriteBar, Input, Search – теперь для обратной совместимости также переносятся события, т.к. может быть завязка на event.currentTarget и/или может упасть проверка типов (#9445).

Исправления

• Tooltip: Откатили изменения из v7.11.0 и v7.11.2, связанные с пересчётом ширины (#9410)
• PanelHeaderButton: hoverMode={undeined} и/или activeMode={undeined} не перебивают значения по умолчанию (#9413)
• Calendar: Кнопки переключения месяцев могли быть квадратными (#9416)
• ContentCard, Avatar, Image, ImageBase: Для тега img атрибут loading выставлялся после src, что сопровождается багом в Safari и в старых версиях Firefox (#9433)
• useAdaptivityWithJSMediaQueries: поправлено предупреждение о вызове хука вне браузера. Теперь предупреждение будет выводиться один раз

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

• В браузере Firefox не работал перенос строк в коде превью компонента (#9435)
• Шрифт для кода подгружался не сразу, а после загрузки CSS (#9434)

Исправления

• Tooltip: Текст мог переходить на новую строку (#9389)

Исправления

• HorizontalScroll: Контент не прокручивался по краям на сенсорных экранах (#9341)

BREAKING CHANGE

Улучшения

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

  - ChromeAndroid >= 63
  + ChromeAndroid >= 68
  - iOS >= 12
  + iOS >= 13 
  - Chrome >= 63
  + Chrome >= 68
  - Firefox >= 55
  + Firefox >= 69
  Edge >= 79
  - Opera >= 50
  + Opera >= 68
  - Safari >= 12
  + Safari >= 13
  - Samsung >= 8.2
  + Samsung >= 9

• Поднята целевая версия ECMAScript для компиляции до es2018 (#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) => void (#9195)

• DateRangeInput:

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

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

• CalendarRange: Изменен тип свойства onChange на (value: DateRangeType | null) => 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>

• PanelHeader:

  • Изменена реализация fixed, который закрепляет шапку в области видимости при скролле – вместо position: fixed используется position: sticky. Это потребовало изменение раскладки всей страницы – height: 100% на <html> и <body> удалён в пользу display: flex и теперь высота страницы зависит от содержимого (#9252)
  • Если вы получали высоту области видимости через document.body.clientHeight или на элементе с height: 100% по каскаду ниже, то замените такой код либо на VIsualViewport, либо на document.documentElement.clientHeight, либо на window.innerHeight (#9252)
  • Если вам нужно, чтобы какой-то из элементов растягивался на высоты области видимости, то используйте единицы измерения vh или dvh вместо % (height: 100% → height: 100dvh) (#9252)

• SplitCol:

  • Изменена реализация fixed, который закрепляет колонку в области видимости при скролле – вместо position: fixed используется position: sticky (#9252)
  • Исправлена проблема когда переполненный контент при fixed обрезался – теперь высота SplitCol зависит от его содержимого. Чтобы растянуть потомок на всю колонку, используйте flex-grow: 1 на этом потомке (#9252)

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

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

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

• 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">
  
  - <AppRootProvider sizeX="regular" sizeY="compact">
  + <AppRootProvider viewWidth={ViewWidth.SMALL_TABLET} density="compact">
  
  - <AppRootProvider sizeX="compact" sizeY="regular">
  + <AppRootProvider viewWidth={ViewWidth.MOBILE} density="regular">

Исправления

• 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)
• SplitLayout: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9069, прокидываются в корень компонента (#9182)
• Input: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• Search: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• CustomSelect:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
  • Флаг accessible теперь включен по умолчанию (#9194)
• NativeSelect: Раньше свойства в компонента прокидывались в скрытый ин...

BREAKING CHANGE

Улучшения

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

  - ChromeAndroid >= 63
  + ChromeAndroid >= 68
  - iOS >= 12
  + iOS >= 13 
  - Chrome >= 63
  + Chrome >= 68
  - Firefox >= 55
  + Firefox >= 69
  Edge >= 79
  - Opera >= 50
  + Opera >= 68
  - Safari >= 12
  + Safari >= 13
  - Samsung >= 8.2
  + Samsung >= 9

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

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

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

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

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

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

• DateInput:

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

• DateRangeInput:

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

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

• CalendarRange: Изменен тип свойства onChange на (value: DateRangeType | null) => 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>

• PanelHeader:

  • Изменена реализация fixed, который закрепляет шапку в области видимости при скролле – вместо position: fixed используется position: sticky. Это потребовало изменение раскладки всей страницы – height: 100% на <html> и <body> удалён в пользу display: flex и теперь высота страницы зависит от содержимого (#9252)
  • Если вы получали высоту области видимости через document.body.clientHeight или на элементе с height: 100% по каскаду ниже, то замените такой код либо на VIsualViewport, либо на document.documentElement.clientHeight, либо на window.innerHeight (#9252)
  • Если вам нужно, чтобы какой-то из элементов растягивался на высоты области видимости, то используйте единицы измерения vh или dvh вместо % (height: 100% → height: 100dvh) (#9252)

• SplitCol:

  • Изменена реализация fixed, который закрепляет колонку в области видимости при скролле – вместо position: fixed используется position: sticky (#9252)
  • Исправлена проблема когда переполненный контент при fixed обрезался – теперь высота SplitCol зависит от его содержимого. Чтобы растянуть потомок на всю колонку, используйте flex-grow: 1 на этом потомке (#9252)

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

• Alert: Свойство onClose переименовано на onClosed (#9282)

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

• Свойства 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)
• SplitLayout: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9069, прокидываются в корень компонента (#9182)
• Input: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• Search: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9084, прокидываются в корень компонента (#9183)
• CustomSelect:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
  • Флаг accessible теперь включен по умолчанию (#9194)
• NativeSelect: Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9045, прокидываются в корень компонента (#9185)
• ChipsInput:
  • Раньше свойства в компонента прокидывались в скрытый инпут, но теперь все свойства, кроме описанных в #9063, прокидываются в корень компонента (#9186)

Улучшения

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

• Box, Flex, SimpleGrid: Свойство position расширено значением sticky (#9279)

• ActionSheet: Добавлена поддержка slotProps.iosCloseItem для упрощения локализации кнопки "Отмена" (#9307)
  Теперь можно передавать пропсы напрямую в ActionSheetDefaultIosCloseItem без необходимости создавать обёртку:

  <ActionSheet
    slotProps={{
      iosCloseItem: {
        children: i18n("cancel"),
      },
    }}
  />

• ActionSheetItem: Свойства mode="cancel" и isCancelItem отмечены как устаревшие. Вместо этого используйте компонент ActionSheetDefaultIosCloseItem (#9307)

• RichCell: Добавлены новые свойства meta и submeta для размещения дополнительного контента внутри основного блока (#9304)

• ModalRoot: Компонент помечен как уст...