Миграция на slotProps

В рамках подготовки к исправлению проблемы, что у некоторых компонентов пользовательские свойства передаются не в корневой элемент, а во внутренний (#2342), добавлено новое API slotProps для прокидывания свойств во внутренние элементы компонента (спасибо за идею библиотеке компонентов MUI ❤️). Пока что свойство добавлено только для проблемных компонентов, где это возможно, за исключением Snackbar. В будущем будем рассматривать идею перехода на такое API и в других компонентах где есть свойства по типу inputProps, arrowProps и т.п.

Рекомендуем заранее мигрировать на новое API, чтобы упростить обновление до VKUI v8.

Ниже список компонентов, у которых появилось свойство slotProps в рамках текущего релиза.

• Input:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037)

    <Input
       value="value"
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    input: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    />

• TextArea:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037)

    <TextArea
       value="value"
    -  data-testid="textArea"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    textArea: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "textArea"
    +    }
    +  }};
    />

• WriteBar:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037)

    <WriteBar
       value="value"
    -  data-testid="textArea"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    textArea: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "textArea"
    +    }
    +  }};
    />

• Search:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9037)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9037)

    <Search
       value="value"
       onChange={onChange}
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    input: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    />

• Switch:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <Switch
       defaultChecked
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    input: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    />

• Radio:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Устарели свойства labelProps и getRef. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <Radio
    -  labelProps={{
    -    'aria-label': 'some label',
    -  }}
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    root: {
    +      'aria-label': 'some label',
    +    },
    +    input: {
    +      getRootRef: handleRef,
    +      'data-testid': 'input',
    +      'aria-label': 'some label' 
    +    }
    +  }}
    />

• Checkbox:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <Checkbox
       defaultChecked
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    input: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    />

• File:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Свойство getRef устарели. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <File
       mode="secondary"
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    input: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    />

• NativeSelect:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <NativeSelect
       value={selectedOption}
       onChange={(_, newValue) => setSelectedOption(newValue)}
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={handleRef}
    +  slotProps={{
    +    select: {
    +      'getRootRef': handleRef,
    +      'aria-label': "some label"
    +      'data-testid': "input"
    +    }
    +  }};
    >
      ...
    </NativeSelect>

• CustomSelect:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9036)
  • Свойства getRef, getSelectInputRef, nativeSelectTestId устарели. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9036)

    <CustomSelect
       value={selectedOption}
       options={options
       onChange={(_, newValue) => setSelectedOption(newValue)}
    -  data-testid="input"
    -  aria-label="some label"
    -  getRef={selectRef}
    -  getSelectInputRef={inputRef}
    -  nativeSelectTestId="select-id"
    +  slotProps={{
    +    select: {
    +      getRootRef: selectRef,
    +      'data-testid': 'select-id',
    +    },
    +    input: {
    +      getRootRef: inputRef,
    +      'aria-label': "some label"
    +      'data-testid': "input",
    +    }
    +  }};
    />

• ChipsSelect:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059)

    <ChipsSelect
      id="favoriteGroups"
    -  data-testid="input"
    -  getRef={inputRef}
    +  slotProps={{
    +    input: {
    +      getRootRef: inputRef,
    +      'data-testid': "input"
    +    }
    +  }}
    />

• ChipsInput:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059)

    <ChipsInput
      id="favoriteGroups"
    -  data-testid="input"
    -  getRef={inputRef}
    +  slotProps={{
    +    input: {
    +      getRootRef: inputRef,
    +      'data-testid': "input"
    +    }
    +  }}
    />

• SplitLayout:
  • Добавлено свойство slotProps для прокидывания свойств во внутренние элементы компонента (#9059)
  • Свойство getRef устарело. Если вы передаёте data-* и aria-* атрибуты, то рекомендуем перенести их в slotProps.<name> для сохранения обратной совместимости при миграции на v8 (#9059)

    <SplitLayout
      center={title}
    -  data-testid="content"
    -  getRef={contentRef}
    +  slotProps={{
    +    ...

Исправления

• Cell: Исправлен drag-and-drop элементов (#9085)

Исправления

• usePatchChildren: По типам нельзя было передавать DOM-события, хотя по факту можно (#9064)

Улучшения

• ModalCard, ModalPage: добавлены свойства disableOpenAnimation и disableCloseAnimation, которые позволяют отключить анимации открытия/закрытия модалки (#8980)
• Popper: Добавлено свойство autoUpdateOnAnimationFrame для автоматического обновления позиции на каждом кадре анимации (#9001)

Зависимости

• @vkontakte/vkui-tokens обновлен с 4.69.0 до 4.70.0 (#8964)

Исправления

• Calendar: Свойство yearDropdownTestId не работало при прокидывании в виде функции (#9009)
• В компонентах DateRangeInput и DateInput поправлены отступы от after и before (#9011)

Исправления

• TabsItem: Исправлена проблема, что TabsItem всегда был интерактивным (#8998)

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

• Добавлена возможность переключать режим uwu (#8970)
• Поправлены ссылки на документацию в модалке выбора версии (#8981)
• Поправлено выделение строк в редакторе кода (#8981)
• Добавлены примеры работы с компонентом CustomSelect (#8981)
• Поправлено отображение примеров с DateInput и DateRangeInput (#8981)

Улучшения

• Cell: Добавлено свойство draggerTestId для прокидывания test-id для кнопки перетаскивания (#8923)
• Gallery:
  • Доработана доступность компонента и клавиатурная навигация по слайдам (#8805)
  • Добавлены свойства slideLabel и slideRoleDescription для управления метками слайда (#8805)
  • Теперь при наведении мышью на компонент или при фокусе внутри компонента автопрокрутка ставится на паузу (#8805)
• ModalPage: size теперь принимает все другие допустимые для CSS свойства width значения (#8949)
• Search: Добавлено свойство hideClearButton, чтобы скрывать кнопку очистки (#8948)

Зависимости

• date-fns заменён на внутреннее решение (#8870)
• @vkontakte/vkui-floating-ui обновлён с 0.2.6 до 0.2.7 (#8909)

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

• На https://vkui.io добавлена поддержка системной темы (#8869)
• Добавлен просмотр API хука связанного с компонентом, например, usePagination у Pagination (#8891)

Исправления

• Slider: SliderThumb некорректно отображался на устройствах Huawei (#8954)
• CustomSelect: При первой отрисовке компонента озвучивался текст о том, что опции были загружены (#8953)
• Gallery: Поправлена проблема с анимацией перехода к слайду, когда контент слайда динамический (#8925)

Исправления

• Touch: Исправлена проблема использования компонента Touch на планшетах с подключенной блютуз мышью (#8883)

Исправления

• Button: Применялся некорректный токен для отступа в after из-за чего был расинхрон с отступом в before (#8917)
• ModalCard, ModalPage: При очень быстром открытии и закрытии приложение фризило из-за того, что модальное окно не переходило в конечную фазу анимации (#8890)