Release v7.0.0 · VKCOM/VKUI

TL;DR

BREAKING CHANGE

Tip

Чтобы упростить переход на новую мажорную версию, можно воспользоваться инструментом по автоматической миграции ваших компонентов

Подробную информацию можно найти на этой странице.

⚙️ Сборка

Глобальные настройки

Подняты минимальные версии браузеров (#7568)

ChromeAndroid >= 63
iOS >= 12
Chrome >= 63
Firefox >= 55
Edge >= 79
Opera >= 50
Safari >= 12
Samsung >= 8.2

Импортирование теперь ограничено свойством "exports" в package.json. Если вам нужен какой-то внутренний функционал, то следует создать issues на его экспорт, чтобы мы рассмотрели такую возможность. (#7611)

CSS-бандл

Если вы завязывались на CSS-классы компонентов, то необходимо пройтись по таким местам и проверить классы на соответствие, т.к. теперь за их формирование отвечает CSS Modules. (#7655)

⚠️ Мы всё ещё не рекомендуем завязываться на CSS-классы компонентов – в любой момент они могут измениться.
Сборка переведена на rspack (#7249)

JS-бандл

Поднята целевая версия ECMAScript для компиляции до es2017 (#7568)
Были добавлены use client директивы (#7702)
Удалена CommonJS сборка – теперь библиотека поставляется только как ESM. В зависимости от вашего инструмента для сборки, потребуется настроить трансформацию для пакета @vkontakte/vkui. (#7611)
Возможные проблемы в Jest <= 29

Jest пока не умеет в поле "exports" и ориентируется на поле "main", которого уже нет в VKUI.

Как Workaround, можно написать свой jest-resolver.js (см. jestjs/jest#9771 (comment)).
```
const DEPENDENCIES_WITH_NO_MAIN_FIELD = ['@vkontakte/vkui'];

module.exports = (path, options) =>
  options.defaultResolver(path, {
    ...options,
    packageFilter: (pkg) =>
      DEPENDENCIES_WITH_NO_MAIN_FIELD.includes(pkg.name) ? { ...pkg, main: pkg.module } : pkg,
  });
```
Возможные проблемы в Vitets

Может падать с ошибкой SyntaxError: Named export 'IconAppearanceProvider' not found. The requested module '@vkontakte/icons' is a CommonJS module, which may not support all module.exports as named exports..

Чтобы исправить это, нужно добавить @vkontakte/vkui в параметр test.server.deps.inline в конфиге vitest.config.*.
```
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    resolve: {},
    test: { server: { deps: { inline: [/@vkontakte\/vkui/] } } },
  };
});
```

🌗 `Appearance` → `ColorScheme`

Название Appearance для указания светлой или тёмной темы совпадало с названием параметров некоторых компонентов, что могло путать,
поэтому пришли к названию ColorScheme, также как свойство в CSS.

Это привело к следующим изменениям:

Константа Appearance переименована в ColorScheme (#7728)

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

- export const Appearance = {
+ export const ColorScheme = {
  DARK: 'dark',
  LIGHT: 'light',
} as const;

- const apperance = Appearance.DARK
+ const colorScheme = ColorScheme.DARK

Тип AppearanceType переименован в ColorSchemeType (#7728)

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

- const appearance: ApperanceType = Appearance.DARK;
+ const colorScheme: ColorSchemeType = ColorScheme.DARK;

AppearanceProvider переименован в ColorSchemeProvider, AppearanceProviderProps переименован в ColorSchemeProviderProps (#7728)

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

- const props: AppearanceProviderProps = {
+ const props: ColorSchemeProviderProps = {
  value: 'dark'
}

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

- <AppearanceProvider value={colorScheme}>
+ <ColorSchemeProvider value={colorScheme}>
  <AdaptivityProvider sizeY="regular">
    <Div style={{ padding: 10 }}>
      <Textarea id="textarea" />
    </Div>
  </AdaptivityProvider>
- </AppearanceProvider>
+ </ColorSchemeProvider>

Хук useAppearance переименован в useColorScheme (#7728)
Пример миграции
```
- const appearance = useAppearance();
+ const colorScheme = useColorScheme();
```

В ConfigProvider и ConfigProviderProps свойство appearance переименовано в colorScheme (#7728)

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

<ConfigProvider
  platform="vkcom"
- appearance="light"
+ colorScheme="light"
>
  <AdaptivityProvider viewWidth={ViewWidth.DESKTOP} hasPointer>
    <Div>Content</Div>
  </AdaptivityProvider>
</ConfigProvider>

В ConfigProviderContext свойство appearance переименовано в colorScheme (#7728)

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

<ConfigProviderContext.Provider value={{
  ...configContext,
  - appearance: 'light'
  + colorScheme: 'light'
}}>
  {children}
</ConfigProviderContext.Provider>

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

const {
  ...args,
- appearance
+ colorScheme
} = useConfigProvider();

🖼️ Layout

AppRoot:
- переработана логика автоматического добавления классов, необходимых для работы VKUI, на документ. Постарались максимально уменьшить их количество. (#7739)
  В режиме mode="full" на html-элемент добавляется класс .vkui и класс токенов темы, которая сейчас используется. На точку монтирования приложения добавляется класс .vkui__root.
  В режиме mode="embedded" на точку монтирования добавляются классы .vkui__root и .vkui__root--embedded.
  В режиме mode="partial" дополнительные классы не добавляются.
  Добавление классов можно отключить с помощью нового свойства disableSettingVKUIClassesInRuntime. Это отключит добавление всех классов, кроме класса токенов.
  SSR. Для того, чтобы минимизировать затраты браузера на рендер страницы нужно на стороне сервера проставить все классы самостоятельно.
- по умолчанию все плавающие элементы (модальные окна, попапы) рендеряться в document.body. Раньше в VKUI дополнительно создавался контейнер для порталов. Мы его убрали, чтобы при старте приложения дополнительно не создавать контейнер в document.body, который может быть не нужен. Переопределить контейнер для рендера порталов всё также можно с помощью portalRoot. (#7739)
SplitLayout: свойства popout и modal помечены как @deprecated (#7739)

Теперь что ModalRoot, что элементы Alert, ScreenSpinner и ActionSheet больше нет необходимости объявлять на верхнем уровне и передавать в SplitLayout. Такие элементы будут по умолчанию рендерится в document.body. Если хочется вернуть старое поведение, то нужно точечно отключить
функцию портала, передав, например, в ModalRoot передать usePortal={false}.
Пример миграции
```
<SplitLayout
- modal={<ModalRoot>...</ModalRoot>}
>
  <SplitCol>...</SplitCol>
+ <ModalRoot usePortal={false}>...</ModalRoot>
</SplitLayout>
```

ModalRoot: удалена реализация контекста через React.cloneElement, которая требовала передавать settlingHeight и dynamicContentHeight в обёртки над ModalPage / ModalCard.

Пример миграции (перенос `settlingHeight` / `dynamicContentHeight`)

const SomeWrapper = ({ id }) => (
  <ModalPage
    id={id}
+   settlingHeight={100} // или dynamicContentHeight
  />
);

<ModalRoot activeModal="m">
  <SomeWrapper
    id="m"
-   settlingHeight={100} // или dynamicContentHeight
  />
</ModalRoot>

Пример миграции (пробрасывание `settlingHeight` / `dynamicContentHeight`)

- const SomeWrapper = ({ id }) => (
+ const SomeWrapper = (props) => (
  <ModalPage
-   id={id}
+   {...props}
  />
);

<ModalRoot activeModal="m">
  <SomeWrapper
    id="m"
    settlingHeight={100} // или dynamicContentHeight
  />
</ModalRoot>

🎨 Синхронизация параметров с дизайном

Чтобы улучшить разработческий опыт при общении с дизайном, в этом релизе разом сократили расхождения по названиям параметров React с Figma.

ActionSheet:

свойство header переименовано на title (#7785)
свойство text переименовано на description (#7785)

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

<ActionSheet
  onClose={() => {}}
- header="Вы действительно хотите удалить это видео из Ваших видео?"
+ title="Вы действительно хотите удалить это видео из Ваших видео?"
- text="Данное действие реально удалит видео, подумайте!"
+ description="Данное действие реально удалит видео, подумайте!"
>
  <ActionSheetItem mode="destructive">Удалить видео</ActionSheetItem>
</ActionSheet>

Alert:

свойство header переименовано на title (#7769)
свойство text переименовано на description (#7769)

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

<Alert
- header="Подтвердите действие"
+ title="Подтвердите действие"
- text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+ description="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
  actionsAlign="left"
  actionsLayout="horizontal"
/>

Banner:

свойство subheader переименовано в subtitle (#7773)
свойство text переименовано в extraSubtitle (#7773)
свойство header переименовано в title (#7773)

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

<Banner
  before={<Avatar size={48} src={'user_lihachyov'} />}
-  header="Сегодня день рождения Михаила Лихачёва"
+  title="Сегодня день рождения Михаила Лихачёва"
-  subheader="Подарите подарок"
+  subtitle="Подарите подарок"
-  text="Дополнительный текст"
+  extraSubtitle="Дополнительный текст"
/>

свойство asideMode переименовано на after (#7793)

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

<Banner
  before={<Avatar size={48} src={'user_lihachyov'} />}
  title="Сегодня день рождения Михаила Лихачёва"
  subtitle="Подарите подарок"
  extraSubtitle="Дополнительный текст"
- asideMode="dismiss"
+ after="dismiss"
/>

CardGrid: свойство spaced переименовано на padding (#7804)

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

<CardGrid
  size="s"
- spaced
+ padding
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardGrid>

CardScroll: свойство noSpaces заменено на padding (#7788)

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

<CardScroll
  size="s"
- noSpaces
+ padding={false}
>
  <Card>
    <div style={{ paddingBottom: '66%' }} />
  </Card>
</CardScroll>

Cell: свойство expandable переименовано на chevron (#7787)

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

<Cell
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</Cell>

CellButton:

свойство subhead переименовано в overTitle (#7861)

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

<CellButton
  onClick={() => {}}
- subhead="Subhead"
+ overTitle="Subhead"
  indicator="При использовании"
>
  Геолокация
</CellButton>

свойство expandable переименовано в chevron (#7787)

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

<CellButton
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</CellButton>

ContentCard:

свойство header переименовано в title (#7771)
свойство subtitle переименовано в overTitle (#7771)
свойство text переименовано в description (#7771)
свойство headerComponent переименовано в titleComponent (#7771)

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

<ContentCard
- subtitle="VKUI"
+ overTitle="VKUI"
- header="ContentCard example"
+ title="ContentCard example"
- headerComponent="h4"
+ titleComponent="h4"
  caption="VKUI Styleguide > Blocks > ContentCard"
- text="Badlands is the story about dreams and cruel reality..."
+ description="Badlands is the story about dreams and cruel reality..."
/>

FormStatus: свойство header переименовано в title (#7773)

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

<FormStatus
- header="Некорректный мобильный номер"
+ title="Некорректный мобильный номер"
  mode="error"
>
  Необходимо корректно ввести номер в международном формате
</FormStatus>

Gallery: значение arrowSize="l" удалено, используйте arrowSize="m", а вместо arrowSize="m" используйте arrowSize="s".
Пример миграции
```
- <Gallery arrowSize="m">
+ <Gallery arrowSize="s">

- <Gallery arrowSize="l">
+ <Gallery arrowSize="m">
```

Header: свойство aside переименовано в after (#7764)

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

<Header
  mode="primary"
  subtitle="SOHN — Conrad"
  subtitleComponent="h3"
- aside={
+ after={
    <Link>
      Показать все
      {<Icon12ChevronOutline />}
    </Link>
  }
/>

HorizontalCell:
- свойство header переименовано на title (#7698)
  Пример миграции
```
<HorizontalCell
- header="Header"
+ title="Header"
/>
```
- значение size="l" теперь имеет ограничение по максимальной ширине, воспользуйтесь size="auto" там, где это необходимо (#7807)
HorizontalCellShowMore: значение size="l" удалено, используйте size="m" (#7807)
Пример миграции
```
- <HorizontalCellShowMore size="l">
+ <HorizontalCellShowMore size="m">
```
HorizontalScroll: значение arrowSize="l" удалено, используйте arrowSize="m", а вместо arrowSize="m" используйте arrowSize="s".
Пример миграции
```
- <HorizontalScroll arrowSize="m">
+ <HorizontalScroll arrowSize="s">

- <HorizontalScroll arrowSize="l">
+ <HorizontalScroll arrowSize="m">
```

MiniInfoCell: свойство expandable переименовано на chevron (#7787)

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

<MiniInfoCell
  before={<Icon20WorkOutline />}
  mode="add"
  onClick={() => console.log('Указать место учёбы')}
  textWrap="short"
- expandable
+ chevron
>
  Укажите место учёбы
</MiniInfoCell>

ModalCard / ModalCardBase:

свойство header переименовано в title (#7782)
свойство subheader переименовано в description (#7782)
свойство headerComponent переименовано в titleComponent (#7782)
свойство subheaderComponent переименовано в descriptionComponent (#7782)

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

<ModalCard
  dismissButtonMode="inside"
  dismissLabel="Закрыть"
- header="Десктопная и планшетная версии с крестиком внутри"
+ title="Десктопная и планшетная версии с крестиком внутри"
- headerComponent="h1"
+ titleComponent="h1"
- subheader="Сверху будет безопасный отступ до иконки"
+ description="Сверху будет безопасный отступ до иконки"
- subheaderComponent="span"
+ descriptionComponent="span"
  actions={
    <React.Fragment>
      <Button size="l" mode="primary" stretched>
        Некая кнопка
      </Button>
    </React.Fragment>
  }
/>

OnboardingTooltip: переименованы свойства text на description, header на title (#7765)

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

<OnboardingTooltip
  placement="right"
- header="Header"
+ title="Header"
- text="Привет"
+ description="Привет"
>
  <Button style={{ margin: 20 }}>Наведи</Button>
</OnboardingTooltip>

PanelHeaderContent: свойство status переименовано на subtitle (#7781)

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

<PanelHeaderContent
- status="был в сети сегодня, в 18:46"
+ subtitle="был в сети сегодня, в 18:46"
  before={<Avatar size={36} src={'user_va'} />}
>
  Влад Анесов
</PanelHeaderContent>

Placeholder

свойство header переименовано на title

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

<Placeholder
  icon={<Icon56UsersOutline />}
- header={<Button size="m">Подключить сообщества</Button>}
+ title={<Button size="m">Подключить сообщества</Button>}
>
  Подключите сообщества, от которых Вы хотите получать уведомления
</Placeholder>

подкомпонент Header переименован на Title, Text переименован на Description

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

<Placeholder.Container>
- <Placeholder.Header>
+ <Placeholder.Title>
    Find friends
-  </Placeholder.Header>
+  </Placeholder.Title>
-  <Placeholder.Text>
+  <Placeholder.Description>
    The people you add as your friends will be displayed here
-  </Placeholder.Text>
+  </Placeholder.Description>
</Placeholder.Container>

RichCell:
- свойство text переименовано в subtitle (#7719)
  Пример миграции
```
<RichCell
- text="Санкт-Петербург"
+ subtitle="Санкт-Петербург"
/>
```
- свойство caption переименовано в extraSubtitle (#7719)
  Пример миграции
```
<RichCell
- caption="сегодня в 18:00"
+ extraSubtitle="сегодня в 18:00"
/>
```
- свойство subhead переименовано в overTitle (#7719)
  Пример миграции
```
<RichCell
- subhead="онлайн"
+ overTitle="онлайн"
/>
```

ScreenSpinner: свойство caption переименовано на label (#7790)

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

<ScreenSpinner
  state="loading"
- caption="Caption"
+ label="Caption"
/>

<ScreenSpinner.Container
- caption="Caption"
+ label="Caption"
>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

ScrollArrow: значение size="l" удалено, используйте size="m", а вместо size="m" используйте size="s" (#7807)
Пример миграции
```
- <ScrollArrow size="m">
+ <ScrollArrow size="s">

- <ScrollArrow size="l">
+ <ScrollArrow size="m">
```

TabbarItem: свойство text переименовано на label (#7783)

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

<Tabbar style={{ position: 'static', margin: '10px 0' }}>
  <TabbarItem
    selected={true}
-   text="Новости"
+   label="Новости"
  >
    <Icon28NewsfeedOutline />
  </TabbarItem>
</Tabbar>

Separator:
- свойство wide заменено свойством padding (#7720)
  Пример миграции
```
<Separator
-  wide={false}
+  padding
/>

<Separator
-  wide
/>

<Separator
-  wide={true}
/>
```
- свойство mode заменено на appearance (#7687)
  Пример миграции
```
<Separator
-  mode="primary"
+  appearance="primary"
/>
```

SimpleCell:

свойство subhead переименовано в overTitle (#7861)

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

<SimpleCell
  onClick={() => {}}
- subhead="Subhead"
+ overTitle="Subhead"
  indicator="При использовании"
>
  Геолокация
</SimpleCell>

свойство expandable переименовано на chevron (#7787)

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

<SimpleCell
  onClick={() => {}}
- expandable="auto"
+ chevron="auto"
  indicator="При использовании"
>
  Геолокация
</SimpleCell>

SubnavigationButton: свойство expandable переименовано на chevron (#7787)

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

<SubnavigationButton
- expandable={true}
+ chevron={true}
  selected={true}
  onClick={() => {}}
>
  Button
</SubnavigationButton>

SubnavigationBar: свойство mode заменено на флаг fixed (#7792)
Пример миграции
```
<SubnavigationBar
- mode="fixed"
+ fixed
/>

<SubnavigationBar
- mode="overflow"
/>
```

Tooltip: переименованы свойства text на description, header на title (#7765)

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

<Tooltip
  placement="right"
- header="Header"
+ title="Header"
- text="Привет"
+ description="Привет"
>
  <Button style={{ margin: 20 }}>Наведи</Button>
</Tooltip>

UsersStack: свойство direction заменено на avatarsPosition со значениями 'inline-start' | 'inline-end' | 'block-start' (#7666)

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

- <UsersStack direction="row" />
+ <UsersStack avatarsPosition="inline-start" />

- <UsersStack direction="row-reverse" />
+ <UsersStack avatarsPosition="block-start" />

- <UsersStack direction="column" />
+ <UsersStack avatarsPosition="inline-end" />

📐 Унификация формата размеров

Header: изменен формат size с 'regular' | 'large' на 'm' | 'l' (#7567)

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

- <Header mode="primary" size="large">
+ <Header mode="primary" size="l">
  Большой заголовок
</Header>

PanelSpinner: изменен формат size с 'small' | 'regular' | 'medium' | 'large' на 's' | 'm' | 'l' | 'xl'.

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

- <PanelSpinner size="large" />
+ <PanelSpinner size="xl" />

- <PanelSpinner size="medium" />
+ <PanelSpinner size="l" />

- <PanelSpinner size="regular" />
+ <PanelSpinner size="m" />

- <PanelSpinner size="small" />
+ <PanelSpinner size="s" />

Spinner: изменен формат size с 'small' | 'regular' | 'medium' | 'large' на 's' | 'm' | 'l' | 'xl' (#7567)

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

- <Spinner size="large" />
+ <Spinner size="xl" />

- <Spinner size="medium" />
+ <Spinner size="l" />

- <Spinner size="regular" />
+ <Spinner size="m" />

- <Spinner size="small" />
+ <Spinner size="s" />

🧩 Остальные изменения в компонентах

Типографика: теперь используется useAccentWeight = false по умолчанию. Когда дополнительно требуется переопределить тип начертания текста с помощью свойства weight - VKUI использует токены fontWeightBase*. Чтобы включить fontWeightAccent* токены, нужно использовать свойство useAccentWeight (#7633)
Button:
- изменен цвет компонента при appearance="overlay" и mode="secondary" (#7661)
- изменен цвет компонента в состоянии mode="primary" и appearance="neutral", при миграции рекомендуется выставлять mode="secondary" при appearance="neutral" (#7802)
  Пример миграции
```
<Button
  appearance="neutral"
+ mode="secondary"
/>
```
Card: изменен тег используемый по умолчанию для ренедеринга компонента с div на li (#7520)
CardGrid: изменен тег используемый по умолчанию для ренедеринга компонента с div на ul (#7520)
CardScroll: изменен тег используемый по умолчанию для ренедеринга компонента с div на ul (#7520)
ContentCard: изменен тег используемый по умолчанию для ренедеринга компонента с div на li (#7520)
CellButton: свойство mode заменено на appearance со значениями 'accent' | 'neutral' | 'negative', также для appearance="accent" (a.k.a mode="primary") возвращён токен --vkui--color_text_accent, а вот при комбинации с centered применяется --vkui--color_text_accent_themed (#7684)
Пример миграции
```
<CellButton
-  mode="danger"
+  appearance="negative"
>
  Создать что-нибудь
</CellButton>

<CellButton
-  mode="primary"
+  appearance="accent"
>
  Создать что-нибудь
</CellButton>
```

FormItem: у под-компонента FormItem.TopLabel свойство multiline было удалено, теперь свойство topMultiline устанавливается у компонент FormItem (#7578)

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

<FormItem
+  topMultiline
  top={
    <FormItem.Top>
-      <FormItem.TopLabel htmlFor="about" multiline>Дополнительная информация</FormItem.TopLabel>
+      <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel>
      <FormItem.TopAside>0/100</FormItem.TopAside>
    </FormItem.Top>
  }
>
  <div/>
</FormItem>

Flex: изменена последовательность отступов в свойстве gap на [row, column] (#7550)
Пример миграции
```
<Flex
  direction="column"
- gap={[20, 10]}
+ gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</Flex>
```
Header: свойство mode было удалено. Логика удаления свойства mode (#7863)

Таблица миграции значений

v6 v7

size="l" mode="primary" size="xl"

size="m" mode="primary" size="m"

mode="tertiary" size="m"

mode="secondary" size="s"
HorizontalScroll: свойство inline удалено и теперь применяется по умолчанию. Если вы использовали дополнительные обертки, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование (#7582)
HorizontalCellShowMore: свойство compensateLastCellIndent удалено. Если вы использовали дополнительные обертки внутри HorizontalScroll, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование и размещать HorizontalCellShowMore на том же уровне вложенности, что и остальные ячейки в HorizontalScroll (#7582)
Image: у под-компонента Image.Overlay свойство disableInteractive было удалено, вместо него теперь можно просто не прокидывать свойство onClick (#7628)

v6	v7
`size="l" mode="primary"`	`size="xl"`
`size="m" mode="primary"`	`size="m"`
`mode="tertiary"`	`size="m"`
`mode="secondary"`	`size="s"`

ScreenSpinner: удалено свойство size (#7523)

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

<ScreenSpinner
  state="loading"
-  size="regular"
/>
<ScreenSpinner.Container>
- <ScreenSpinner.Loader size="small" />
+ <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>

SimpleGrid: изменена последовательность отступов в свойстве gap на [row, column] (#7550)
Пример миграции
```
<SimpleGrid
  columns={2}
-  gap={[20, 10]}
+  gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</SimpleGrid>
```
Spacing: удален вариант значения пропа size 3xs, вместо него можно использовать 2xs, совпадающий по значению (#7634)
Пример миграции
```
- <Spacing size="3xs" />
+ <Spacing size="2xs" />
```

💅 CustomScrollView: JS → CSS

Так как дизайн не документирует поведение ползунка и полосы прокрутки, было решено перейти на использование системного поведения
и тем самым облегчить компонент за счёт стилизации прокрутки полностью через CSS (Firefox < 64 стилизация останется браузерной) (#7703).

Note

Если по какой-то причине вам всё же нужна JS-реализация, то советуем присмотреться к готовой библиотеке react-custom-scrollbars или к другим альтернативам.

В связи с этим:

удалены свойства windowResize, autoHideScrollbar, autoHideScrollbar (#7703)

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

<CustomScrollView
  className={"className"}
- windowResize
- autoHideScrollbar
- autoHideScrollbarDelay={1000}
  enableHorizontalScroll
>
...
</CustomScrollView>

удалено свойство boxRef, вместо него можно использовать свойство getRootRef (#7703)
Пример миграции
```
<CustomScrollView
  className={"className"}
- boxRef={ref}
+ getRootRef={ref}
  enableHorizontalScroll
>
...
</CustomScrollView>
```
добавлено свойство scrollbarHidden для скрытия скроллбара (#7703)

CustomSelect: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

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

<CustomSelect
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>

ChipsSelect: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

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

<ChipsSelect
  id="colors"
  value={selectedColors}
  onChange={setSelectedColors}
  options={colors}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  placeholder="Не выбраны"
  creatable="Добавить цвет"
  allowClearButton={true}
/>

Select: удалены свойства autoHideScrollbar, autoHideScrollbar (#7703)

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

<Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- autoHideScrollbar
- autoHideScrollbarDelay={1500}
  onChange={(e) => setSelectType(e.target.value)}
/>

🧩 Остальные изменения в компонентах

Типографика: теперь используется useAccentWeight = false по умолчанию. Когда дополнительно требуется переопределить тип начертания текста с помощью свойства weight - VKUI использует токены fontWeightBase*. Чтобы включить fontWeightAccent* токены, нужно использовать свойство useAccentWeight (#7633)
Button: изменен цвет компонента при appearance="overlay" и mode="secondary" (#7661)
Calendar: свойство onClose переименовано на onDoneButtonClick (#7880)
Пример миграции
```
<Calendar
- onClose={() => void 0}
+ onDoneButtonClick={() => void 0}
/>
```
CellButton: свойство mode заменено на appearance со значениями 'accent' | 'neutral' | 'negative', также для appearance="accent" (a.k.a mode="primary") возвращён токен --vkui--color_text_accent, а вот при комбинации с centered применяется --vkui--color_text_accent_themed (#7684)
Пример миграции
```
<CellButton
- mode="danger"
+ appearance="negative"
>
  Создать что-нибудь
</CellButton>

<CellButton
- mode="primary"
+ appearance="accent"
>
  Создать что-нибудь
</CellButton>
```

Counter: изменены значения свойства mode (#7919)

Таблица миграции значений

v6	v7
`mode="inherit"`	без изменений
`mode="primary"`	`mode="primary" appearance="accent"`
`mode="secondary"`	`mode="primary" appearance="neutral"`
`mode="prominent"`	`mode="primary" appearance="accent-red"`
`mode="contrast"`	`mode="contrast" appearance="accent"`

PanelHeader: теперь не переопределяет цвет компонента Spinner, поэтому, если вы использовали компонент Spinner внутри PanelHeader, передавайте <Spinner noColor /> (#7820)
Flex: изменена последовательность отступов в свойстве gap на [row, column] (#7550)

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

<Flex
  direction="column"
- gap={[20, 10]}
+ gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</Flex>

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

<FormItem
+ topMultiline
  top={
    <FormItem.Top>
-     <FormItem.TopLabel htmlFor="about" multiline>Дополнительная информация</FormItem.TopLabel>
+     <FormItem.TopLabel htmlFor="about">Дополнительная информация</FormItem.TopLabel>
      <FormItem.TopAside>0/100</FormItem.TopAside>
    </FormItem.Top>
  }
>
  <div/>
</FormItem>

HorizontalScroll: свойство inline удалено и теперь применяется по умолчанию. Если вы использовали дополнительные обертки, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование (#7582)
HorizontalCellShowMore: свойство compensateLastCellIndent удалено. Если вы использовали дополнительные обертки внутри HorizontalScroll, чтобы выравнивать ячейки внутри компонента, просьба пересмотреть их использование и размещать HorizontalCellShowMore на том же уровне вложенности, что и остальные ячейки в HorizontalScroll (#7582)
Image: у под-компонента Image.Overlay свойство disableInteractive было удалено, вместо него теперь можно просто не прокидывать свойство onClick (#7628)
Link: теперь для передачи иконок следует использовать параметры before и after, CSS свойства, которые через каскад задавались переданным иконкам в children, удалены (#7957)
Пример миграции
```
<Link
  href="#"
+ after={<Icon12Example />}
>
  Текст ссылки
- <Icon12Example />
</Link>
```
PanelHeaderButton:
- у пресета PanelHeaderClose удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel (#7874)
- у пресета PanelHeaderSubmit удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойствоlabel (#7874)
- у пресета PanelHeaderEdit удалены свойства children и label. Вместо label можно использовать свойства doneLabel и editLabel. Свойство children не использовалось. (#7874)
- у пресета PanelHeaderBack удалено свойство children. Теперь для прокидывания текста для a11y нужно прокидывать его в свойство label. Логика отображения label осталась как была, в отличие от других пресетов. Также для более точно настройки label были добавлены свойства hideLabelOnVKCom и hideLabelOnIOS, чтобы можно было скрывать label на соответствующей платформе.
Select: для указания невыбранного состояния теперь необходимо использовать null вместо undefined или пустой строки. То же самое относится и к CustomSelect и NativeSelect (#7822)
ScreenSpinner:
- удалено свойство size (#7523)
  Пример миграции
```
<ScreenSpinner
  state="loading"
- size="regular"
/>
<ScreenSpinner.Container>
- <ScreenSpinner.Loader size="small" />
+ <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
```
- удалён a11y-текст по умолчанию, передавайте нужный текст в children или label свойства (#7821)
SimpleGrid: изменена последовательность отступов в свойстве gap на [row, column] (#7550)
Пример миграции
```
<SimpleGrid
  columns={2}
- gap={[20, 10]}
+ gap={[10, 20]}
  align="center"
>
  <div/>
  <div/>
</SimpleGrid>
```
Spacing: удален вариант значения пропа size 3xs, вместо него можно использовать 2xs, совпадающий по значению (#7634)
Пример миграции
```
- <Spacing size="3xs" />

+ <Spacing size="2xs" />
```

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

Добавлен экспорт FloatingArrow, использующийся компонентами Popover, Tooltip, Popper (#7977)

Улучшения

Добавлен экспорт AppRootPortal (#7996)
Добавлен экспорт типа FloatingPlacementWithAuto (#7810)
Banner:
- в свойство after (в бывшем asideMode) теперь можно прокинуть любое значение (#7793)
- корневой элемент компонента теперь сделан через Tappable, соответственно, в компонент теперь можно прокидывать соответствующие Tappable параметры (#7793)
Calendar:
- Добавлено свойство doneButtonShow для скрытия кнопки "done" (#7736)
- Добавлено свойство doneButtonDisabled для блокирования кнопки "disabled" (#7736)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
CalendarRange:
- изменена логика выбора промежутка дат, теперь для сброса промежутка надо кликнуть на третью дату и можно выбрать новую дату (#7682)
- добавлены свойства для установки data-testid у вложенных элементов (#7705)
Card: добавлен mode "plain" (#7824)
Checkbox: добавлена возможность передавать альтернативные иконки (#7608, спасибо @fuel-coffee ❤️)
ChipsInput: импортированы типы ChipOptionValue и ChipOptionLabel (#7892)
Counter:
- добавлено свойство appearance, которое отвечает за цвет (#7919)
- добавлено свойство color, с помощью которого можно изменить цвет компонента. Работает только совместно с appearance="custom" (#7919)
CustomScrollView: импортирован тип CustomScrollViewProps (#7892)
DateInput:
- добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
DateRangeInput:
- добавлено свойство onCalendarOpenChanged - колбэк, срабатывающий при открытии/закрытии календаря (#7878)
- Добавлены свойства для установки data-testid у вложенных элементов (#7705)
Flex:
- свойства теперь наследуются из RootComponentProps (#7700)
- импортирован тип FlexItem для Flex.Item (#7892)
Header: добавлены значения для свойства size: 's' и 'xl' (#7863)
HorizontalCell:
- добавлено новое свойство TitleComponent, для изменения типографического элемента title (#8001)
- значения size расширены до 's' | 'm' | 'l' | 'xl' | 'auto' | number (#7807)
- добавлено свойство textAlign для выравнивания типографических элементов (#7980)
- добавлено свойство noPadding, отключающее отступы у крайних элементов (#7980)
ModalPage:
- теперь можно использовать без ModalRoot (для рендера в портале можно обернуть в AppRootPortal); (#6759)
- изменилось значение по умолчанию у свойств settlingHeight – 75 → 50 ; (#6759)
- добавлено свойство keepMounted; (#6759)
- добавлено свойство footer; (#6759)
- добавлено свойство disableContentPanningGestureProp; (#6759)
- расширен тип onClose до (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void. (#6759)
EllipsisText: у компонента был добавлен атрибут title, который отображает весь текст, переданный в компонент. Его также можно отключить, передав параметр disableNativeTitle (#7681)
ModalCard:
- теперь можно использовать без ModalRoot (для рендера в портале можно обернуть в AppRootPortal); (#6759)
- добавлено свойство keepMounted; (#6759)
- расширен тип onClose до (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void. (#6759)
ModalRoot:
- updateModalHeight() помечен как @depreacted, т.к. в нём больше нет необходимости – ModalPage, при dynamicContentHeight, теперь автоматически подстраиваются под контент; (#6759)
- registerModal() помечен как @depreacted, т.к. изменилась логика работы компонента – теперь ModalPage и ModalCard ориентируется на контекст, создаваемый ModalRoot; (#6759)
- добавлено свойство usePortal. (#6759)
Link: появился параметр noUnderline, отключающий подчеркивание при наведении (#7957)
Popover: расширен тип свойства restoreFocus до boolean | 'anchor-element' | HTMLElement для указания на какой элемент будет возвращен фокус после закрытия Popover. Полезно для кейса с Popover с trigger="hover", при установке restoreFocus="anchor-element" фокус всегда будет возвращаться в якорный элемент (#7806)
ScreenSpinner: добавлена возможность прокинуть иконку для state="custom" с помощью свойства customIcon (#7523)
Select: в колбэк onChange помимо ChangeEvent теперь прокидывается новое значение вторым аргументом. Рекомендуется использовать именно второй аргумент. То же самое относится и к CustomSelect и NativeSelect (#7822)
Пример
```
<Select
  id="select-type-select-id"
  value={selectType}
  placeholder="Не задан"
  options={selectTypes}
- onChange={e => setSelectType(e.target.value)}
+ onChange={(_, newType) => setSelectType(newType)}
/>
```
Separator:
- добавлены новые свойства direction, size и align (#7720)
- добавлена возможность передать css-переменную в size (#7955)
SimpleGrid: свойства теперь наследуются из RootComponentProps (#7700)
Spacing: добавлена возможность передать css-переменную в size (#7955)

Хуки

useScrollLock: теперь при <AppRoot scroll="global" /> в <html> добавляется overscroll-behavior: none, чтобы избегать pull-to-refresh (#7881)
useOrientationChange()
- поправлена проблема с гидрациией при SSR (#7811)
- добавлен экспорт типа Orientation (#7811)
Добавлен экспорт usePatchChildren() – хук позволяет пропатчить переданный компонент так, чтобы можно было получить ссылку на его DOM-элемент. Также есть возможность прокинуть в компонент дополнительные параметры. (#7812)

Исправления

Исправлены ошибки в Content Security Policy (CSP) связанные с тем, что в CustomResizeObserver создавался iframe с src="javascript:void(0)", теперь iframe создается без явного указания src, что позволяет браузеру самостоятельно заполнить это поле. Значение по умолчанию для браузеров: src="about:blank" (#7933)
При использовании нескольних компонентов блокирующих прокрутку, на демонтировании одного из них могло происходить разблокирование прокрутки (#7817)
Поправлена проблема с Avatar.Overlay для Next.JS (#7984)
В некоторых компонентах свойство style имело мало приоритетности (#7854)
Button: кнопка со свойством loading была кликабельна (#7830)
Calendar: исправлены active/hover-состояния у дня календаря (#7738)
CalendarRange: поправлены моргания промежутка при выборе (#7750)
CustomSelect: Исправлена проблема с элементами списка у которых value="" issue #7696 (#7822)
DateInput: инициализируем секунды и миллисекунды (часы и минуты при вводе без времени) нулевыми значениями при ручном вводе даты (#7872)
EllipsisText: не срабатывал параметр Component (#7909)
Gallery:
- исправлена ошибка при отсутствии слайдов в режиме looped (#7686)
- исправлено мерцание при переключении слайдов (#7842)
- не работало переключение слайдов в условиях, когда общая ширина слайдов меньше контейнера, но за счёт отступа из-за выравнивания по центру (align="center") слайды немного не помещаются в контейнере. (#7862)
- теперь во время drag происходит остановка автопереключения слайдов (#7877)
- исправлена ошибка при отсутствии слайдов в режиме looped (#7686)
Group: исправлено отображение сепаратора на iPhone 15 (#7930)
HorizontalCell: добавлено корректное вычисление ширины внутреннего контента (#7916)
HorizontalScroll: исправлена проблема с отсутствием скрола при наведении на стрелки (#7882)
Placeholder: при stretched режиме больше не выставляется padding-block: inherit (#7583)
RichCell: поправлена проблема с длинным текстом и выходом за границы компонента (#7730)
Search: исправлен отступ при Group в режиме mode="plain" (#7962)
SimpleCell : стили SimpleCell перебивают стили CellButton в cssm сборке (#7737)
Tappable:
- вернули работу hasActive свойства, исправили отсутствие activated-состояния при некоторых условиях (#7906)
- в кликабельных компонентах исправлена проблема, когда при касании через тач появлялся системный оверлей (#7908)
- возвращена компенсация отступа при оборачивании Header (#7958)

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

Дополнен блок о переопределение темы через AppearanceProvider информацией о тонкостях работы некоторых компонентов (#7584)
Раздел CSS Modules дополнен информацией про использование пакета с 'css-loader' >= 7.0.0 (#7668)
Flex: добавили возможность не задавать свойство gap (#7899)

Зависимости

date-fns обновлён с 4.0.0 до 4.1.0 (#7645)
@vkontakte/vkui-floating-ui обновлён с 2.1.1 до 2.1.3 (#7649)
@vkontakte/vkui-tokens обновлён с 4.53.3 до 4.56.1 (#7800, #7991, #8024)
@vkonktate/vkjs обновлён с 1.3.0 до 2.0.1 (#7939)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v7.0.0

TL;DR

BREAKING CHANGE

⚙️ Сборка

🌗 `Appearance` → `ColorScheme`

🖼️ Layout

🎨 Синхронизация параметров с дизайном

📐 Унификация формата размеров

🧩 Остальные изменения в компонентах

💅 CustomScrollView: JS → CSS

🧩 Остальные изменения в компонентах

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

Улучшения

Хуки

Исправления

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

Зависимости

Contributors

v7.0.0

TL;DR

BREAKING CHANGE

⚙️ Сборка

🌗 Appearance → ColorScheme

🖼️ Layout

🎨 Синхронизация параметров с дизайном

📐 Унификация формата размеров

🧩 Остальные изменения в компонентах

💅 CustomScrollView: JS → CSS

🧩 Остальные изменения в компонентах

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

Улучшения

Хуки

Исправления

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

Зависимости

Contributors

🌗 `Appearance` → `ColorScheme`