@vkontakte/vkui 8.0.2 → 8.1.0

package/src/components/ImageBase/ImageBase.tsx

@@ -66,19 +66,19 @@ export interface ImageBaseProps
    *
    * > ⚠️ Использование кастомного размера – это пограничный кейс.
    */
-  size?: LiteralUnion<ImageBaseSize, number>;
+  size?: LiteralUnion<ImageBaseSize, number> | undefined;
   /**
    * Ширина изображения.
    */
-  widthSize?: number | string;
+  widthSize?: number | string | undefined;
   /**
    * Высота изображения.
    */
-  heightSize?: number | string;
+  heightSize?: number | string | undefined;
   /**
    * Отключает обводку.
    */
-  noBorder?: boolean;
+  noBorder?: boolean | undefined;
   /**
    * Фолбек на случай, если картинка не прогрузилась.
    *
@@ -92,49 +92,53 @@ export interface ImageBaseProps
    *
    * > ⚠️ Может перекрывать `children`.
    */
-  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;
+  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps> | undefined;
   /**
    * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.
    * @since 5.10.0
    */
-  withTransparentBackground?: boolean;
+  withTransparentBackground?: boolean | undefined;
   /**
    * Пользовательское значения стиля object-fit
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
-  objectFit?: React.CSSProperties['objectFit'];
+  objectFit?: React.CSSProperties['objectFit'] | undefined;
   /**
    * Пользовательское значения стиля object-position
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
    */
-  objectPosition?: React.CSSProperties['objectPosition'];
+  objectPosition?: React.CSSProperties['objectPosition'] | undefined;
   /**
    * Флаг для сохранения пропорций картинки.
    * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
    */
-  keepAspectRatio?: boolean;
+  keepAspectRatio?: boolean | undefined;
   /**
    * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
    */
-  elementTiming?: string;
+  elementTiming?: string | undefined;
   /**
    * Пользовательское значения стиля filter.
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
    *
    * При передаче этого свойства `<img />` будет обёрнут в дополнительный контейнер.
    */
-  filter?: React.CSSProperties['filter'];
+  filter?: React.CSSProperties['filter'] | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `img`: свойства для прокидывания в тег `<img>`;.
    */
-  slotProps?: {
-    img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        img?:
+          | (React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство
+  getRef?: React.Ref<HTMLImageElement> | undefined; // TODO [>=9] Удалить свойство
 }
 
 const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx

@@ -31,7 +31,7 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
    * - `"stroke"` – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
    * - `"shadow"` – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).
    */
-  background?: 'stroke' | 'shadow';
+  background?: 'stroke' | 'shadow' | undefined;
   /**
    * Принимает иконку.
    *

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

@@ -77,18 +77,18 @@ export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HT
   /**
    * Отступ компонента от края контейнера по горизонтали.
    */
-  inlineIndent?: FloatElementIndentation;
+  inlineIndent?: FloatElementIndentation | undefined;
   /**
    * Отступ компонента от края контейнера по вертикали.
    */
-  blockIndent?: FloatElementIndentation;
+  blockIndent?: FloatElementIndentation | undefined;
   /**
    * Режим отображения компонента:
    *
    * - `"always"`: Всегда
    * - `"on-hover"`: При наведении на картинку.
    */
-  visibility?: 'always' | 'on-hover';
+  visibility?: 'always' | 'on-hover' | undefined;
 }
 
 export const ImageBaseFloatElement = ({

package/src/components/ImageBase/ImageBaseOverlay/types.ts

@@ -10,7 +10,7 @@ export interface ImageBaseOverlayCommonProps
    *
    * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
    */
-  theme?: 'dark' | 'light';
+  theme?: 'dark' | 'light' | undefined;
   /**
    * Определяет каким образом должен показываться оверлей.
    *
@@ -23,11 +23,11 @@ export interface ImageBaseOverlayCommonProps
    * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте
    * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
    */
-  visibility?: 'on-hover' | 'always';
+  visibility?: 'on-hover' | 'always' | undefined;
   /**
    * `className` для компонента.
    */
-  className?: string;
+  className?: string | undefined;
 }
 
 export interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {

package/src/components/ImageBase/types.ts

@@ -6,15 +6,15 @@ export type ImageBaseExpectedIconProps = {
   /**
    * Ширина иконки.
    */
-  width?: number;
+  width?: number | undefined;
   /**
    * Высота иконки.
    */
-  height?: number;
+  height?: number | undefined;
   /**
    * ClassName для иконки.
    */
-  className?: string;
+  className?: string | undefined;
 };
 
 export interface ImageBaseContextProps {

package/src/components/Input/Input.tsx

@@ -51,18 +51,24 @@ export interface InputProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLInputElement>;
+  getRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в поле ввода.
    */
-  slotProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
-    input?: React.InputHTMLAttributes<HTMLInputElement> &
-      HasRootRef<HTMLInputElement> &
-      HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)
+          | undefined;
+        input?:
+          | (React.InputHTMLAttributes<HTMLInputElement> &
+              HasRootRef<HTMLInputElement> &
+              HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
 }
 
 /**

package/src/components/InputLike/InputLike.tsx

@@ -11,9 +11,9 @@ import styles from './InputLike.module.css';
 export interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {
   length: number;
   index: number;
-  value?: string;
-  label?: string;
-  onElementSelect?: (index: number) => void;
+  value?: string | undefined;
+  label?: string | undefined;
+  onElementSelect?: ((index: number) => void) | undefined;
 }
 
 const MASK_SYMBOL = String.fromCharCode(0x2007);

package/src/components/Link/Link.tsx

@@ -7,19 +7,19 @@ export interface LinkProps extends TappableOmitProps {
   /**
    * Иконка слева.
    */
-  before?: ReactElement;
+  before?: ReactElement | undefined;
   /**
    * Иконка справа.
    */
-  after?: ReactElement;
+  after?: ReactElement | undefined;
   /**
    * Выключает появления нижнего подчеркивания при наведении.
    */
-  noUnderline?: boolean;
+  noUnderline?: boolean | undefined;
   /**
    * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.
    */
-  hasVisited?: boolean;
+  hasVisited?: boolean | undefined;
 }
 
 /**

package/src/components/List/List.tsx

@@ -8,7 +8,7 @@ export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
   /**
    * Задает отступ между элементами.
    */
-  gap?: number;
+  gap?: number | undefined;
 };
 
 /**

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -28,13 +28,13 @@ export interface MiniInfoCellProps
    * Иконка слева.<br />
    * Рекомендуется использовать иконки размера 20.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
 
   /**
    * Содержимое справа.<br />
    * `<UsersStack size="s" />` или `<Avatar size={24} />`.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
 
   /**
    * Тип ячейки:
@@ -44,7 +44,7 @@ export interface MiniInfoCellProps
    * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
    * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
    */
-  mode?: 'base' | 'accent' | 'add' | 'more';
+  mode?: 'base' | 'accent' | 'add' | 'more' | undefined;
 
   /**
    * Тип отображения текста:
@@ -53,12 +53,12 @@ export interface MiniInfoCellProps
    * - `short` – максимально отображается 3 строки, остальное обрезается.
    * - `full` – текст отображается полностью. В дизайне это свойство `multiline`.
    */
-  textWrap?: 'nowrap' | 'short' | 'full';
+  textWrap?: 'nowrap' | 'short' | 'full' | undefined;
 
   /**
    * Передавать `true`, если предполагается переход при нажатии на ячейку.
    */
-  chevron?: boolean;
+  chevron?: boolean | undefined;
 }
 
 /**

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -39,7 +39,7 @@ const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>>
 };
 
 export interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {
-  ModalOverlay?: ComponentType<ModalOverlayProps>;
+  ModalOverlay?: ComponentType<ModalOverlayProps> | undefined;
 }
 
 /**

package/src/components/ModalCard/types.ts

@@ -17,60 +17,60 @@ export interface ModalCardProps
    *
    * @default false
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Сохранять ли компонент в DOM при `open={false}`.
    *
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * Отключает фокус на интерактивный элемент после открытия модалки.
    *
    * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.
    */
-  noFocusToDialog?: boolean;
+  noFocusToDialog?: boolean | undefined;
   /**
    * `data-testid` для оверлея.
    */
-  modalOverlayTestId?: string;
+  modalOverlayTestId?: string | undefined;
   /**
    * Будет вызвано при начале открытия модалки.
    */
-  onOpen?: VoidFunction;
+  onOpen?: VoidFunction | undefined;
   /**
    * Будет вызвано при окончательном открытии модалки.
    */
-  onOpened?: VoidFunction;
+  onOpened?: VoidFunction | undefined;
   /**
    * Будет вызвано при начале закрытия модалки.
    */
-  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;
+  onClose?: ((reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void) | undefined;
   /**
    * Будет вызвано при окончательном закрытии модалки.
    */
-  onClosed?: VoidFunction;
+  onClosed?: VoidFunction | undefined;
   /**
    * Позволяет отключить захват фокуса.
    *
    * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
   /**
    * Отключает отображение и взаимодействие с фоном модалки.
    */
-  disableModalOverlay?: boolean;
+  disableModalOverlay?: boolean | undefined;
   /**
    * Отключает анимацию открытия модалки.
    */
-  disableOpenAnimation?: boolean;
+  disableOpenAnimation?: boolean | undefined;
   /**
    * Отключает анимацию закрытия модалки.
    */
-  disableCloseAnimation?: boolean;
+  disableCloseAnimation?: boolean | undefined;
   /**
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
 }

package/src/components/ModalCardBase/ModalCardBase.module.css

@@ -25,10 +25,6 @@
   );
 }
 
-.containerSoftwareKeyboardOpened {
-  margin-block-end: 0;
-}
-
 .title,
 .description {
   padding-block: 0;

package/src/components/ModalCardBase/ModalCardBase.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./ModalCardBase.module.css"],"names":["container","withSafeZone","containerSoftwareKeyboardOpened","title","description","icon","actions","dismiss","ios","desktop"],"mappings":"AAAA;AAAA,E,aAAAA,W,WAAA;AAAA,E,aAmBAC,c,WAnBA;AAAA,E,aAmBcD,W,WAnBd;AAAA,E,aA2BAE,iC,WA3BA;AAAA,E,aA+BAC,O,WA/BA;AAAA,E,aAgCAC,a,WAhCA;AAAA,E,aAwCAD,O,WAxCA;AAAA,E,aA4CAC,a,WA5CA;AAAA,E,aAgDAC,M,WAhDA;AAAA,E,aAsDAC,S,WAtDA;AAAA,E,aA0DAC,S,WA1DA;AAAA,E,aAqEAC,K,WArEA;AAAA,E,aAqEKR,W,WArEL;AAAA,E,aAgFAS,S,WAhFA;AAAA,E,aAgFSF,S,WAhFT;AAAA,E,aAqFAE,S,WArFA;AAAA,E,aAqFST,W,WArFT;AAAA,E,aA2FAS,S,WA3FA;AAAA,E,aA2FQD,K,WA3FR;AAAA,E,aA2FaR,W,WA3Fb;AAAA,E,aAgGAC,c,WAhGA;AAAA,E,aAgGaQ,S,WAhGb;AAAA,E,aAgGsBT,W,WAhGtB;AAAA;AAAA","file":"ModalCardBase.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./ModalCardBase.module.css"],"names":["container","withSafeZone","title","description","icon","actions","dismiss","ios","desktop"],"mappings":"AAAA;AAAA,E,aAAAA,W,WAAA;AAAA,E,aAmBAC,c,WAnBA;AAAA,E,aAmBcD,W,WAnBd;AAAA,E,aA2BAE,O,WA3BA;AAAA,E,aA4BAC,a,WA5BA;AAAA,E,aAoCAD,O,WApCA;AAAA,E,aAwCAC,a,WAxCA;AAAA,E,aA4CAC,M,WA5CA;AAAA,E,aAkDAC,S,WAlDA;AAAA,E,aAsDAC,S,WAtDA;AAAA,E,aAiEAC,K,WAjEA;AAAA,E,aAiEKP,W,WAjEL;AAAA,E,aA4EAQ,S,WA5EA;AAAA,E,aA4ESF,S,WA5ET;AAAA,E,aAiFAE,S,WAjFA;AAAA,E,aAiFSR,W,WAjFT;AAAA,E,aAuFAQ,S,WAvFA;AAAA,E,aAuFQD,K,WAvFR;AAAA,E,aAuFaP,W,WAvFb;AAAA,E,aA4FAC,c,WA5FA;AAAA,E,aA4FaO,S,WA5Fb;AAAA,E,aA4FsBR,W,WA5FtB;AAAA;AAAA","file":"ModalCardBase.module.css.d.ts","sourceRoot":""}

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -24,29 +24,29 @@ export interface ModalCardBaseProps
    *
    * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src="" />`.
    */
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | undefined;
 
   /**
    * Заголовок карточки.
    */
-  title?: React.ReactNode;
+  title?: React.ReactNode | undefined;
   /**
    * Позволяет поменять тег используемый для заголовка.
    */
-  titleComponent?: React.ElementType;
+  titleComponent?: React.ElementType | undefined;
   /**
    * Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title.
    */
-  titleId?: string;
+  titleId?: string | undefined;
 
   /**
    * Описание.
    */
-  description?: React.ReactNode;
+  description?: React.ReactNode | undefined;
   /**
    * Позволяет поменять тег используемый для описания.
    */
-  descriptionComponent?: React.ElementType;
+  descriptionComponent?: React.ElementType | undefined;
 
   /**
    * Кнопки-действия. Принимает [`Button`](https://vkui.io/components/button) с параметрами:
@@ -59,26 +59,26 @@ export interface ModalCardBaseProps
    * - `gap="s" mode="horizontal" stretched`
    * - `gap="m" mode="vertical" stretched`.
    */
-  actions?: React.ReactNode;
+  actions?: React.ReactNode | undefined;
   /**
    * Обработчик закрытия модального окна.
    */
-  onClose?: VoidFunction;
+  onClose?: VoidFunction | undefined;
 
   /**
    * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.
    */
-  dismissLabel?: string;
+  dismissLabel?: string | undefined;
 
   /**
    * Задаёт контенту максимальную ширину для десктопной версии.
    */
-  size?: number;
+  size?: number | undefined;
 
   /**
    * Передает атрибут `data-testid` для кнопки закрытия.
    */
-  modalDismissButtonTestId?: string;
+  modalDismissButtonTestId?: string | undefined;
   /**
    * Расположение кнопки закрытия (внутри и вне `popout'a`).
    *
@@ -88,20 +88,20 @@ export interface ModalCardBaseProps
    *
    * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте.
    */
-  dismissButtonMode?: 'inside' | 'outside' | 'none';
+  dismissButtonMode?: 'inside' | 'outside' | 'none' | undefined;
   /**
    * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, нажатие на подложку).
    *
    * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте.
    */
-  preventClose?: boolean;
+  preventClose?: boolean | undefined;
   /**
    * Управляющие элементы под кнопкой закрытия.
    *
    * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton.
    *
    */
-  outsideButtons?: React.ReactNode;
+  outsideButtons?: React.ReactNode | undefined;
 }
 
 /**

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -12,7 +12,7 @@ export interface ModalDismissButtonProps extends Omit<ModalOutsideButtonProps, '
   /**
    * Содержимое кнопки.
    */
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 }
 
 /**

package/src/components/ModalOutlet/ModalOutlet.tsx

@@ -6,9 +6,9 @@ import styles from './ModalOutlet.module.css';
 
 export interface ModalOutletProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
-  disableModalOverlay?: boolean;
-  hidden?: boolean;
-  isDesktop?: boolean;
+  disableModalOverlay?: boolean | undefined;
+  hidden?: boolean | undefined;
+  isDesktop?: boolean | undefined;
 }
 
 /**

package/src/components/ModalOutsideButton/ModalOutsideButton.tsx

@@ -9,7 +9,7 @@ export interface ModalOutsideButtonProps extends TappableOmitProps {
   /**
    * Текст для скринридера.
    */
-  'aria-label'?: string;
+  'aria-label'?: string | undefined;
   /**
    * Рекомендуется использовать иконки размером `20px`.
    */

package/src/components/ModalOverlay/ModalOverlay.tsx

@@ -28,13 +28,13 @@ const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>>
 export interface ModalOverlayProps
   extends DataHTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
-  visible?: boolean;
-  position?: 'absolute' | 'fixed';
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  onClosed?: () => void;
-  onShowed?: () => void;
-  disableOpenAnimation?: boolean;
-  disableCloseAnimation?: boolean;
+  visible?: boolean | undefined;
+  position?: 'absolute' | 'fixed' | undefined;
+  onClick?: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+  onClosed?: (() => void) | undefined;
+  onShowed?: (() => void) | undefined;
+  disableOpenAnimation?: boolean | undefined;
+  disableCloseAnimation?: boolean | undefined;
 }
 
 /**

package/src/components/ModalPage/ModalPageBase.tsx

@@ -28,8 +28,8 @@ export interface ModalPageBaseProps
       | 'hideCloseButton'
       | 'onClose'
     > {
-  isDesktop?: boolean;
-  closable?: boolean;
+  isDesktop?: boolean | undefined;
+  closable?: boolean | undefined;
 }
 
 export const ModalPageBase = ({

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -42,8 +42,8 @@ const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>>
 export interface ModalPageInternalProps
   extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {
   snapPoint: SnapPoint;
-  ModalOverlay?: ComponentType<ModalOverlayProps>;
-  onSnapPointChange?: SnapPointChange;
+  ModalOverlay?: ComponentType<ModalOverlayProps> | undefined;
+  onSnapPointChange?: SnapPointChange | undefined;
 }
 
 /**