@vkontakte/vkui 8.0.2 → 8.1.0

package/src/components/CustomSelect/CustomSelect.tsx

@@ -118,7 +118,7 @@ export type { CustomSelectClearButtonProps };
 export interface SelectProps<
   OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,
 > extends Omit<NativeSelectProps, 'slotProps'>,
-    Omit<FormFieldProps, 'maxHeight'>,
+    Omit<FormFieldProps, 'maxHeight' | 'mode'>,
     Pick<CustomSelectDropdownProps, 'overscrollBehavior'>,
     Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'form' | 'readOnly'> {
   /**
@@ -127,30 +127,34 @@ export interface SelectProps<
    * - `select`: свойства для прокидывания в нативный `select`;
    * - `input`: свойства для прокидывания в нативный `input`.
    */
-  slotProps?: NativeSelectProps['slotProps'] & {
-    input?: React.InputHTMLAttributes<HTMLInputElement> &
-      HasDataAttribute &
-      HasRootRef<HTMLInputElement>;
-  };
+  slotProps?:
+    | (NativeSelectProps['slotProps'] & {
+        input?:
+          | (React.InputHTMLAttributes<HTMLInputElement> &
+              HasDataAttribute &
+              HasRootRef<HTMLInputElement>)
+          | undefined;
+      })
+    | undefined;
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    *
    * Ref на внутрений компонент input.
    */
-  getSelectInputRef?: React.Ref<HTMLInputElement>;
+  getSelectInputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Если `true`, то при нажатии на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
    * производится по `option.label`.
    */
-  searchable?: boolean;
+  searchable?: boolean | undefined;
   /**
    * Текст, который будет отображен, если приходит пустой `options`.
    */
-  emptyText?: string;
+  emptyText?: string | undefined;
   /**
    * Событие изменения текстового поля.
    */
-  onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
   /**
    * Список опций в списке.
    */
@@ -158,11 +162,11 @@ export interface SelectProps<
   /**
    * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.
    */
-  filterFn?: false | FilterFn<OptionInterfaceT>;
+  filterFn?: false | FilterFn<OptionInterfaceT> | undefined;
   /**
    * Направление раскрытия выпадающего списка.
    */
-  popupDirection?: PopupDirection;
+  popupDirection?: PopupDirection | undefined;
   /**
    * Рендер-проп для кастомного рендера опции.
    * В объекте аргумента приходят [свойства опции](https://vkui.io/components/custom-select#custom-select-option-api).
@@ -171,7 +175,7 @@ export interface SelectProps<
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии
    * опции.
    */
-  renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => React.ReactNode;
+  renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => React.ReactNode | undefined;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
    * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.
@@ -185,73 +189,82 @@ export interface SelectProps<
    * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`
    * "победит" `renderDropdown`.
    */
-  fetching?: boolean;
+  fetching?: boolean | undefined;
   /**
    * Обработчик закрытия выпадающего списка.
    */
-  onClose?: VoidFunction;
+  onClose?: VoidFunction | undefined;
   /**
    * Обработчик открытия выпадающего списка.
    */
-  onOpen?: VoidFunction;
+  onOpen?: VoidFunction | undefined;
   /**
    * Кастомная кнопка для очистки значения.
    * Должна принимать обязательное свойство `onClick`.
    */
-  ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;
+  ClearButton?: React.ComponentType<CustomSelectClearButtonProps> | undefined;
   /**
    * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
-  allowClearButton?: boolean;
+  allowClearButton?: boolean | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки очистки.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
   /**
    * Отступ от выпадающего списка.
    */
-  dropdownOffsetDistance?: number;
+  dropdownOffsetDistance?: number | undefined;
   /**
    * Ширина раскрывающегося списка зависит от контента.
    */
-  dropdownAutoWidth?: boolean;
+  dropdownAutoWidth?: boolean | undefined;
   /**
    * Использовать Portal для рендеринга выпадающего списка.
    */
-  forceDropdownPortal?: boolean;
+  forceDropdownPortal?: boolean | undefined;
   /**
    * Отключает максимальную высоту по умолчанию.
    */
-  noMaxHeight?: boolean;
+  noMaxHeight?: boolean | undefined;
   /**
    * Передает атрибут `data-testid` для элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.
    */
-  labelTextTestId?: string;
+  labelTextTestId?: string | undefined;
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`.
    *
    * Передает атрибут `data-testid` для нативного элемента `select`.
    */
-  nativeSelectTestId?: string;
+  nativeSelectTestId?: string | undefined;
   /**
    * Обработчик события `keyDown` в поле ввода.
    */
-  onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
+  onInputKeyDown?: ((e: React.KeyboardEvent, isOpen: boolean) => void) | undefined;
   /**
    * @deprecated Since 8.0.0. Будет удалено в 9.0.0.
    *
    * Включает режим в котором выбранное значение `CustomSelect` читается скринридерами корректно.
    * В данном режиме введенное в поле ввода значение не сбрасывается при потере фокуса.
    */
-  accessible?: boolean /* TODO [>=v9] удалить свойство */;
+  accessible?: boolean | undefined /* TODO [>=v9] удалить свойство */;
   /**
    * Текстовая метка для индикации процесса загрузки данных для пользователей скринридерами. По умолчанию: `"Список опций загружается..."`.
    */
-  fetchingInProgressLabel?: string;
+  fetchingInProgressLabel?: string | undefined;
   /**
    * Текстовая метка для индикации завершения процесса загрузки данных для пользователей скринридерами. По умолчанию: `"Загружено опций: ${options.length}"`.
    */
-  fetchingCompletedLabel?: string | ((optionsCount: number) => string);
+  fetchingCompletedLabel?: string | ((optionsCount: number) => string) | undefined;
+  /**
+   * @deprecated Будет удалено в 10.0.0, используйте `selectType`.
+   *
+   * Режим отображения.
+   *
+   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.
+   * - `plain` — показывает только текст-подсказку.
+   */
+  mode?: 'default' | 'plain' | undefined;
 }
 
 /**

package/src/components/CustomSelect/CustomSelectClearButton.tsx

@@ -10,7 +10,7 @@ export interface CustomSelectClearButtonProps extends HasDataAttribute {
   /**
    * `className` для компонента.
    */
-  className?: string;
+  className?: string | undefined;
   /**
    * Обработчик нажатия на кнопку.
    */
@@ -18,7 +18,7 @@ export interface CustomSelectClearButtonProps extends HasDataAttribute {
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 
 export const CustomSelectClearButton = ({

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.tsx

@@ -28,20 +28,26 @@ export interface CustomSelectInputProps
     HasRootRef<HTMLDivElement>,
     HasAlign,
     Omit<FormFieldProps, 'mode' | 'type' | 'maxHeight'> {
-  slotProps?: {
-    input?: React.InputHTMLAttributes<HTMLInputElement> &
-      HasRootRef<HTMLInputElement> &
-      HasDataAttribute;
-    root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
-      HasRootRef<HTMLDivElement> &
-      HasDataAttribute;
-  };
-  selectType?: SelectType;
-  multiline?: boolean;
-  labelTextTestId?: string;
-  fetching?: boolean;
-  searchable?: boolean;
-  accessible?: boolean;
+  slotProps?:
+    | {
+        input?:
+          | (React.InputHTMLAttributes<HTMLInputElement> &
+              HasRootRef<HTMLInputElement> &
+              HasDataAttribute)
+          | undefined;
+        root?:
+          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+              HasRootRef<HTMLDivElement> &
+              HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
+  selectType?: SelectType | undefined;
+  multiline?: boolean | undefined;
+  labelTextTestId?: string | undefined;
+  fetching?: boolean | undefined;
+  searchable?: boolean | undefined;
+  accessible?: boolean | undefined;
 }
 
 /**

package/src/components/CustomSelect/hooks/useDropdownOpenedController.ts

@@ -5,8 +5,8 @@ import { useStableCallback } from '../../../hooks/useStableCallback';
 import type { SelectProps } from '../CustomSelect';
 /* eslint-disable jsdoc/require-jsdoc */
 type UseDropdownOpenedControllerProps = Pick<SelectProps, 'onOpen' | 'onClose'> & {
-  onOpened?: () => void;
-  onClosed?: () => void;
+  onOpened?: (() => void) | undefined;
+  onClosed?: (() => void) | undefined;
 };
 
 type Open = () => void;

package/src/components/CustomSelect/hooks/useSelectedOptionController.ts

@@ -14,7 +14,7 @@ import type { SelectProps } from '../CustomSelect';
 type UseSelectedOptionControllerProps = Pick<SelectProps, 'value' | 'defaultValue'> & {
   isControlledOutside: boolean;
   allowClearButton: boolean;
-  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;
+  onChange?: ((e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void) | undefined;
 };
 /* eslint-enable jsdoc/require-jsdoc */
 

package/src/components/CustomSelect/types.ts

@@ -22,7 +22,7 @@ export interface CustomSelectOptionInterface {
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   [index: string]: any;
 }
 

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -14,20 +14,20 @@ export interface CustomSelectDropdownProps
     Pick<CustomScrollViewProps, 'overscrollBehavior'>,
     HasDataAttribute {
   targetRef: React.RefObject<HTMLElement | null>;
-  placement?: Placement;
-  scrollBoxRef?: React.Ref<HTMLDivElement>;
-  fetching?: boolean;
-  offsetDistance?: number;
+  placement?: Placement | undefined;
+  scrollBoxRef?: React.Ref<HTMLDivElement> | undefined;
+  fetching?: boolean | undefined;
+  offsetDistance?: number | undefined;
   /**
    * Ширина раскрывающегося списка зависит от контента.
    */
-  autoWidth?: boolean;
-  forcePortal?: boolean;
-  onPlacementChange?: (placement: Placement) => void;
+  autoWidth?: boolean | undefined;
+  forcePortal?: boolean | undefined;
+  onPlacementChange?: ((placement: Placement) => void) | undefined;
   /**
    * Отключает максимальную высоту по умолчанию.
    */
-  noMaxHeight?: boolean;
+  noMaxHeight?: boolean | undefined;
 }
 
 export const CustomSelectDropdown = ({

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -20,33 +20,33 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
   /**
    * Добавляет описание под основным блоком.
    */
-  description?: React.ReactNode;
+  description?: React.ReactNode | undefined;
   /**
    * Вставляет элемент в начало блока перед основным контентом.
    * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Вставляет элемент в конец блока после основного контента.
    * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Позволяет создавать вложенность.
    */
-  hierarchy?: number;
+  hierarchy?: number | undefined;
   /**
    * Включает состояние выбранного элемента списка.
    */
-  selected?: boolean;
+  selected?: boolean | undefined;
   /**
    * Включает состояние наведения.
    */
-  hovered?: boolean;
+  hovered?: boolean | undefined;
   /**
    * Включает состояние фокуса.
    */
-  focused?: boolean;
+  focused?: boolean | undefined;
   /**
    * Блокирует весь блок.
    *
@@ -54,11 +54,11 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkui.io/components/custom-select) и [ChipsSelect](https://vkui.io/components/chips-select) не будут знать об актуальном состоянии
    * опции.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Предотвращает перенос текста внутри опции.
    */
-  textNoWrap?: boolean;
+  textNoWrap?: boolean | undefined;
 }
 
 /**

package/src/components/DateInput/DateInput.tsx

@@ -23,7 +23,7 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';
 import { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { FocusTrapInternal } from '../FocusTrap/FocusTrap';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
@@ -53,31 +53,31 @@ export type DateInputPropsTestsProps = {
   /**
    * Передает атрибут `data-testid` для поля ввода дня.
    */
-  dayFieldTestId?: string;
+  dayFieldTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода месяца.
    */
-  monthFieldTestId?: string;
+  monthFieldTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода года.
    */
-  yearFieldTestId?: string;
+  yearFieldTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода часа.
    */
-  hourFieldTestId?: string;
+  hourFieldTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода минут.
    */
-  minuteFieldTestId?: string;
+  minuteFieldTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки показа календаря.
    */
-  showCalendarButtonTestId?: string;
+  showCalendarButtonTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки очистки даты.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
 };
 
 export interface DateInputProps
@@ -121,56 +121,56 @@ export interface DateInputProps
   /**
    * Обработчик изменения выбранной даты.
    */
-  onChange?: (value: Date | null) => void;
+  onChange?: ((value: Date | null) => void) | undefined;
   /**
    * Передает атрибуты `data-testid` для интерактивных элементов в календаре.
    */
-  calendarTestsProps?: CalendarTestsProps;
+  calendarTestsProps?: CalendarTestsProps | undefined;
   /**
    * Расположение календаря относительно поля ввода.
    */
-  calendarPlacement?: PlacementWithAuto;
+  calendarPlacement?: PlacementWithAuto | undefined;
   /**
    * Автоматически закрывать календарь при изменениях.
    */
-  closeOnChange?: boolean;
+  closeOnChange?: boolean | undefined;
   /**
    * `aria-label` для календаря.
    */
-  calendarLabel?: string;
+  calendarLabel?: string | undefined;
   /**
    * Label для кнопки очистки. Делает доступным для ассистивных технологий.
    */
-  clearFieldLabel?: string;
+  clearFieldLabel?: string | undefined;
   /**
    * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.
    */
-  showCalendarLabel?: string;
+  showCalendarLabel?: string | undefined;
   /**
    * Отключение открытия календаря.
    */
-  disableCalendar?: boolean;
+  disableCalendar?: boolean | undefined;
   /**
    * Обработчик изменения состояния открытия календаря.
    */
-  onCalendarOpenChanged?: (opened: boolean) => void;
+  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;
   /**
    * `aria-label` для поля изменения дня.
    */
-  changeDayLabel?: string;
+  changeDayLabel?: string | undefined;
   /**
    * Обработчик нажатия на кнопку `"Done"`. Используется совместно с флагом `enableTime`.
    */
-  onApply?: (value?: Date) => void;
+  onApply?: ((value?: Date) => void) | undefined;
   /**
    * Функция для кастомного форматирования отображаемого значения даты.
    * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.
    */
-  renderCustomValue?: (date: Date | undefined) => React.ReactNode;
+  renderCustomValue?: ((date: Date | undefined) => React.ReactNode) | undefined;
   /**
    * Часовой пояс для отображения даты.
    */
-  timezone?: string;
+  timezone?: string | undefined;
   /**
    * @deprecated Since 8.0.0. Будет удалено в 9.0.0.
    *
@@ -183,16 +183,16 @@ export interface DateInputProps
    * - календарь при открытии получает фокус, клавиатурный
    * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.
    */
-  accessible?: boolean /* TODO [>=v9] удалить свойство */;
+  accessible?: boolean | undefined /* TODO [>=v9] удалить свойство */;
   /**
    * Позволяет отключить захват фокуса при появлении календаря.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
   /**
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
 }
 
 const elementsConfig = (index: number) => {
@@ -235,13 +235,6 @@ const getInternalValue = (value: CalendarProps['value']) => {
   return newValue;
 };
 
-const CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
-  childList: true,
-  subtree: true,
-  attributes: true,
-  attributeFilter: ['tabindex'],
-};
-
 /**
  * @see https://vkui.io/components/date-input
  */
@@ -612,11 +605,10 @@ export const DateInput = ({
           onPlacementChange={setCalendarPlacement}
           autoUpdateOnTargetResize
         >
-          <FocusTrapInternal
+          <FocusTrap
             rootRef={focusTrapRootRef}
             disabled={disableFocusTrap ?? !accessible}
             restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}
-            mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}
           >
             <div ref={focusTrapRootRef}>
               <Calendar
@@ -651,10 +643,10 @@ export const DateInput = ({
                 minDateTime={minDateTime}
                 maxDateTime={maxDateTime}
                 timezone={timezone}
-                {...calendarTestsProps}
+                {...(calendarTestsProps ?? {})}
               />
             </div>
-          </FocusTrapInternal>
+          </FocusTrap>
         </Popper>
       )}
     </FormField>

package/src/components/DateInput/hooks.ts

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
 
 interface UseDateInputValueOptions {
-  value?: Date | null;
-  defaultValue?: Date | null;
-  onChange?: (value: Date | null) => void;
-  timezone?: string;
+  value?: Date | null | undefined;
+  defaultValue?: Date | null | undefined;
+  onChange?: ((value: Date | null) => void) | undefined;
+  timezone?: string | undefined;
 }
 
 export interface UseDateInputValueReturn {
@@ -28,9 +28,9 @@ const _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {
 
 const getStateValue = (
   defaultStateValue: Date | null,
-  value?: Date | null,
-  defaultValue?: Date | null,
-  timezone?: string,
+  value?: Date | null | undefined,
+  defaultValue?: Date | null | undefined,
+  timezone?: string | undefined,
 ): Date | null => {
   if (value !== undefined) {
     return _convertDateToTimeZone(value, timezone);