@vkontakte/vkui 8.0.2 → 8.1.1

package/src/components/Removable/Removable.tsx

@@ -15,23 +15,23 @@ export interface RemovableProps {
   /**
    * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.
    */
-  removePlaceholder?: React.ReactNode;
+  removePlaceholder?: React.ReactNode | undefined;
   /**
    * Обработчик, срабатывающий при нажатии на контрол удаления.
    */
-  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
+  onRemove?: ((e: React.MouseEvent, rootEl?: HTMLElement | null) => void) | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only).
    */
-  toggleButtonTestId?: string;
+  toggleButtonTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки удаления.
    */
-  removeButtonTestId?: string;
+  removeButtonTestId?: string | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 /* eslint-disable jsdoc/require-jsdoc */
 interface RemovableCommonOwnProps
@@ -39,7 +39,7 @@ interface RemovableCommonOwnProps
     RemovableOwnProps,
     'noPadding' | 'children' | 'removeButtonTestId' | 'disabled' | 'indent'
   > {
-  removePlaceholderString?: string;
+  removePlaceholderString?: string | undefined;
   onRemoveClick: (e: React.MouseEvent) => void;
 }
 /* eslint-enable jsdoc/require-jsdoc */
@@ -99,20 +99,23 @@ interface RemovableOwnProps
   /**
    * Расположение кнопки удаления.
    */
-  align?: 'start' | 'center';
+  align?: 'start' | 'center' | undefined;
   /**
    * Скрывает кнопку, но оставляет отступ.
    * @since 5.4.0
    */
-  indent?: boolean;
+  indent?: boolean | undefined;
   /**
    * Убирает базовые отступы для базовой платформы.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
   /**
    * Содержимое. Можно передать функцию для отрисовки.
    */
-  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);
+  children?:
+    | React.ReactNode
+    | ((renderProps: RemovableIosRenderProps) => React.ReactNode)
+    | undefined;
 }
 
 export const Removable = ({

package/src/components/Removable/RemovableIos.tsx

@@ -13,9 +13,12 @@ import styles from './Removable.module.css';
 
 /* eslint-disable jsdoc/require-jsdoc */
 interface RemovableIosOwnProps extends RemovableProps {
-  indent?: boolean;
-  removePlaceholderString?: string;
-  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);
+  indent?: boolean | undefined;
+  removePlaceholderString?: string | undefined;
+  children?:
+    | React.ReactNode
+    | ((renderProps: RemovableIosRenderProps) => React.ReactNode)
+    | undefined;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 

package/src/components/RichCell/RichCell.tsx

@@ -40,19 +40,19 @@ export interface RichCellProps extends TappableOmitProps {
   /**
    * Контейнер для текста над `children`.
    */
-  overTitle?: React.ReactNode;
+  overTitle?: React.ReactNode | undefined;
   /**
    * Контейнер для текста под `children`.
    */
-  subtitle?: React.ReactNode;
+  subtitle?: React.ReactNode | undefined;
   /**
    * Контейнер для текста под `subtitle`.
    */
-  extraSubtitle?: React.ReactNode;
+  extraSubtitle?: React.ReactNode | undefined;
   /**
    * Контейнер для контента под `caption`. Например `<UsersStack size="m" />`.
    */
-  bottom?: React.ReactNode;
+  bottom?: React.ReactNode | undefined;
   /**
    * Кнопки-действия. Принимает [`Button`](https://vkui.io/components/button) с параметрами:
    *
@@ -63,52 +63,52 @@ export interface RichCellProps extends TappableOmitProps {
    *
    * - `mode="horizontal" gap="s" stretched`.
    */
-  actions?: React.ReactNode;
+  actions?: React.ReactNode | undefined;
   /**
    * `<Avatar size={40|48|72} />`.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Иконка 28 или текст после центрального контента.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Текст под `after`.
    *
    * @deprecated Since 8.0.0. Будет удален в **VKUI v10**.
    * Используйте вместо этого свойство `submeta`.
    */
-  afterCaption?: React.ReactNode;
+  afterCaption?: React.ReactNode | undefined;
   /**
    * Текст после основного контента.
    */
-  meta?: React.ReactNode;
+  meta?: React.ReactNode | undefined;
   /**
    * Текст под `meta`.
    */
-  submeta?: React.ReactNode;
+  submeta?: React.ReactNode | undefined;
   /**
    * Выравнивание before компонента по вертикали.
    */
-  beforeAlign?: Align;
+  beforeAlign?: Align | undefined;
   /**
    * Выравнивание центрального контента по вертикали.
    */
-  contentAlign?: Align;
+  contentAlign?: Align | undefined;
   /**
    * Выравнивание after компонента по вертикали.
    *
    * > Работает только для `after` и `afterCaption`.
    */
-  afterAlign?: Align;
+  afterAlign?: Align | undefined;
   /**
    * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
 }
 
 /**

package/src/components/Root/Root.tsx

@@ -25,7 +25,7 @@ export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Na
   /**
    * Обработчик, который вызывается при завершении анимации смены активной `View`.
    */
-  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;
+  onTransition?: ((params: { isBack: boolean; from: string; to: string }) => void) | undefined;
   /**
    * Коллекция `View`. У каждой `View` должен быть `id`.
    */
@@ -36,8 +36,8 @@ export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Na
 export interface RootState {
   activeView: string;
   transition: boolean;
-  isBack?: boolean;
-  prevView?: string;
+  isBack?: boolean | undefined;
+  prevView?: string | undefined;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 

package/src/components/RootComponent/RootComponent.tsx

@@ -13,11 +13,11 @@ export interface RootComponentExtendProps {
   /**
    * Базовый класс.
    */
-  baseClassName?: string | false;
+  baseClassName?: string | false | undefined;
   /**
    * Базовые стили.
    */
-  baseStyle?: React.CSSProperties;
+  baseStyle?: React.CSSProperties | undefined;
 }
 
 export interface RootComponentInternalProps<T>

package/src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx

@@ -14,7 +14,7 @@ import type { ScreenSpinnerProps } from './types';
 import styles from './ScreenSpinner.module.css';
 
 type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
-  cancelLabel?: ScreenSpinnerProps['cancelLabel'];
+  cancelLabel?: ScreenSpinnerProps['cancelLabel'] | undefined;
 };
 
 const ScreenSpinnerCancelIcon = ({

package/src/components/ScreenSpinner/context.ts

@@ -11,11 +11,11 @@ export interface ScreenSpinnerContextProps {
   /**
    * Текст под иконкой.
    */
-  label?: ScreenSpinnerProps['label'];
+  label?: ScreenSpinnerProps['label'] | undefined;
   /**
    * Кастомная иконка, работает совместно со `state="custom"`.
    */
-  customIcon?: ScreenSpinnerProps['customIcon'];
+  customIcon?: ScreenSpinnerProps['customIcon'] | undefined;
 }
 
 export const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =

package/src/components/ScreenSpinner/types.tsx

@@ -7,21 +7,21 @@ export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> &
     /**
      * Тип отображения спиннера.
      */
-    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';
+    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom' | undefined;
     /**
      * Кастомная иконка, работает совместно со `state="custom"`.
      */
-    customIcon?: React.ReactNode;
+    customIcon?: React.ReactNode | undefined;
     /**
      * Внешний вид отображения спиннера.
      */
-    mode?: 'shadow' | 'overlay';
+    mode?: 'shadow' | 'overlay' | undefined;
     /**
      * Текст под иконкой.
      */
-    label?: React.ReactNode;
+    label?: React.ReactNode | undefined;
     /**
      * Используется при `state='cancelable'`. Делает доступным для ассистивных технологий.
      */
-    cancelLabel?: string;
+    cancelLabel?: string | undefined;
   };

package/src/components/ScrollArrow/ScrollArrow.tsx

@@ -47,15 +47,21 @@ export interface ScrollArrowProps
   /**
    * Размер стрелки.
    */
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
   /**
    * Смещает иконку кнопки навигации по вертикали.
    */
-  offsetY?: number | string;
+  offsetY?: number | string | undefined;
+  /**
+   * Смещает иконку кнопки навигации по горизонтали.
+   * Для `direction="left"` применяется к `left` (в LTR) или `right` (в RTL).
+   * Для `direction="right"` применяется к `right` (в LTR) или `left` (в RTL).
+   */
+  offsetX?: number | string | undefined;
   /**
    * [a11y]: Используется для ассистивных технологий.
    */
-  label?: string;
+  label?: string | undefined;
 }
 
 /**
@@ -67,6 +73,7 @@ export interface ScrollArrowProps
 export const ScrollArrow = ({
   size = 'm',
   offsetY,
+  offsetX,
   direction,
   label: labelProp,
   children = <ArrowIcon size={size} />,
@@ -75,6 +82,19 @@ export const ScrollArrow = ({
   const textDirection = useConfigDirection();
   const label = labelProp ?? labelDirection[direction];
 
+  const iconStyle: React.CSSProperties = {};
+  if (offsetY) {
+    iconStyle.top = offsetY;
+  }
+  if (offsetX) {
+    const isRtl = textDirection === 'rtl';
+    if (direction === 'left') {
+      iconStyle[isRtl ? 'right' : 'left'] = offsetX;
+    } else if (direction === 'right') {
+      iconStyle[isRtl ? 'left' : 'right'] = offsetX;
+    }
+  }
+
   return (
     <RootComponent
       Component="button"
@@ -88,7 +108,10 @@ export const ScrollArrow = ({
       {...restProps}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}
-      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>
+      <span
+        className={styles.icon}
+        style={Object.keys(iconStyle).length > 0 ? iconStyle : undefined}
+      >
         {children}
       </span>
     </RootComponent>

package/src/components/Search/Search.tsx

@@ -27,7 +27,7 @@ const warn = warnOnce('Search');
 
 export type RenderIconButtonFn = (
   icon: React.ReactNode,
-  props?: Partial<IconButtonProps> & HasDataAttribute,
+  props?: (Partial<IconButtonProps> & HasDataAttribute) | undefined,
 ) => React.ReactElement;
 
 export interface SearchProps
@@ -57,74 +57,80 @@ export interface SearchProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLInputElement>;
+  getRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в поле ввода;
    * - `clearButton`: свойства для прокидывания в кнопку очистки.
    */
-  slotProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
-    input?: React.InputHTMLAttributes<HTMLInputElement> &
-      HasRootRef<HTMLInputElement> &
-      HasDataAttribute;
-    clearButton?: React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)
+          | undefined;
+        input?: React.InputHTMLAttributes<HTMLInputElement> &
+          HasRootRef<HTMLInputElement> &
+          HasDataAttribute;
+        clearButton?: React.HTMLAttributes<HTMLElement> &
+          HasRootRef<HTMLElement> &
+          HasDataAttribute;
+      }
+    | undefined;
   /**
    * Only iOS. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Контент, отображаемый перед полем ввода.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Иконка поиска. Может быть React-элементом или функцией, возвращающей элемент.
    */
-  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);
+  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode) | undefined;
   /**
    * Обработчик нажатия на иконку поиска.
    */
-  onIconClick?: React.PointerEventHandler<HTMLElement>;
+  onIconClick?: React.PointerEventHandler<HTMLElement> | undefined;
   /**
    * Значение поля ввода по умолчанию.
    */
-  defaultValue?: string;
+  defaultValue?: string | undefined;
   /**
    * Текст для скринридеров, описывающий иконку поиска.
    */
-  iconLabel?: string;
+  iconLabel?: string | undefined;
   /**
    * Текст для скринридеров, описывающий кнопку очистки.
    */
-  clearLabel?: string;
+  clearLabel?: string | undefined;
   /**
    * @deprecated Since 8.1.0. Будет удалено в **VKUI v10**. Вместо этого используйте `slotProps={ clearButton: { 'data-testid': ... } }`.
    *
    * Передает атрибут `data-testid` для кнопки очистки.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
   /**
    * Удаляет отступы у компонента.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
   /**
    * Текст для кнопки Найти.
    */
-  findButtonText?: string;
+  findButtonText?: string | undefined;
   /**
    * Обработчик, при нажатии на кнопку "Найти".
    */
-  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;
+  onFindButtonClick?: React.MouseEventHandler<HTMLElement> | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки поиска.
    */
-  findButtonTestId?: string;
+  findButtonTestId?: string | undefined;
   /**
    * Скрывает кнопку очистки.
    */
-  hideClearButton?: boolean;
+  hideClearButton?: boolean | undefined;
 }
 
 /**
@@ -282,17 +288,6 @@ export const Search = ({
     [onIconClick],
   );
 
-  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(
-    (e) => {
-      e.preventDefault();
-      inputRef.current?.focus();
-      if (touchEnabled()) {
-        onCancel();
-      }
-    },
-    [inputRef, onCancel],
-  );
-
   useIsomorphicLayoutEffect(() => {
     if (inputRest.value !== undefined) {
       setHasValue(Boolean(inputRest.value));
@@ -322,6 +317,31 @@ export const Search = ({
     iconProp || !hideClearButton || (adaptiveDensity.compact && onFindButtonClick),
   );
 
+  const onClearPointerDown: React.PointerEventHandler<HTMLElement> = (e) => {
+    // Сначала вызываем внешний обработчик, затем локальную логику, чтобы можно было предотвратить обработку фокуса на поле ввода.
+    onClearButtonPointerDown?.(e);
+
+    e.preventDefault();
+    inputRef.current?.focus();
+    if (touchEnabled()) {
+      onCancel();
+    }
+  };
+
+  const onClearClick: React.MouseEventHandler<HTMLElement> = (e) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value',
+    )?.set;
+    nativeInputValueSetter?.call(inputRef.current, '');
+
+    const ev2 = new Event('input', { bubbles: true });
+    inputRef.current?.dispatchEvent(ev2);
+
+    onClearButtonClick?.(e);
+  };
+
   return (
     <RootComponent
       baseClassName={classNames(
@@ -368,8 +388,8 @@ export const Search = ({
             {!hideClearButton && (
               <IconButton
                 hoverMode="opacity"
-                onPointerDown={callMultiple(onIconCancelClickStart, onClearButtonPointerDown)}
-                onClick={callMultiple(onCancel, onClearButtonClick)}
+                onPointerDown={onClearPointerDown}
+                onClick={onClearClick}
                 tabIndex={hasValue ? undefined : -1}
                 disabled={inputRest.disabled}
                 data-testid={clearButtonTestId}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -30,7 +30,7 @@ export interface SegmentedControlOptionInterface<
    * Вставляет элемент перед основным контентом.
    * Рекомендуется использовать только иконки с размером 20.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Текст или React-элемент, отображаемый в качестве метки опции.
    */
@@ -50,23 +50,23 @@ export interface SegmentedControlProps<T extends SegmentedControlValue = Segment
   /**
    * Размер компонента.
    */
-  size?: 'm' | 'l';
+  size?: 'm' | 'l' | undefined;
   /**
    * Имя для input-элементов внутри компонента.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Обработчик изменения выбранного значения.
    */
-  onChange?: (value: T) => void;
+  onChange?: ((value: T) => void) | undefined;
   /**
    * Текущее выбранное значение (для контролируемого компонента).
    */
-  value?: T;
+  value?: T | undefined;
   /**
    * Значение по умолчанию (для неконтролируемого компонента).
    */
-  defaultValue?: T;
+  defaultValue?: T | undefined;
 }
 
 const warn = warnOnce('SegmentedControl');

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -13,9 +13,9 @@ export interface SegmentedControlOptionProps
   extends HasRootRef<HTMLLabelElement>,
     HasRef<HTMLInputElement>,
     HasChildren {
-  rootProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  before?: React.ReactNode;
+  rootProps?: React.LabelHTMLAttributes<HTMLLabelElement> | undefined;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+  before?: React.ReactNode | undefined;
 }
 
 export const SegmentedControlOption = ({

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -26,15 +26,15 @@ export interface SelectMimicryProps
   /**
    * Включает многострочный режим отображения.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Тип селекта, влияющий на внешний вид компонента.
    */
-  selectType?: SelectType;
+  selectType?: SelectType | undefined;
 }
 
 /**

package/src/components/SelectTypography/SelectTypography.tsx

@@ -4,7 +4,7 @@ import type { SelectType } from '../Select/Select';
 import { Text, type TextProps } from '../Typography/Text/Text';
 
 export interface SelectTypographyProps extends TextProps {
-  selectType?: SelectType;
+  selectType?: SelectType | undefined;
 }
 
 /**

package/src/components/SelectionControl/SelectionControl.tsx

@@ -27,7 +27,7 @@ export interface SelectionControlProps
   /**
    * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
 }
 
 /**

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx

@@ -15,8 +15,8 @@ const densityClassNames = {
 };
 
 interface SelectionControlLabelProps extends React.ComponentProps<'div'> {
-  description?: React.ReactNode;
-  titleAfter?: React.ReactNode;
+  description?: React.ReactNode | undefined;
+  titleAfter?: React.ReactNode | undefined;
 }
 
 export function SelectionControlLabel({

package/src/components/Separator/Separator.tsx

@@ -16,25 +16,25 @@ export interface SeparatorProps
   /**
    * Стиль отображения разделителя.
    */
-  appearance?: 'primary' | 'secondary' | 'primary-alpha';
+  appearance?: 'primary' | 'secondary' | 'primary-alpha' | undefined;
   /**
    * Добавляет стандартные отступы у разделителя.
    */
-  padding?: boolean;
+  padding?: boolean | undefined;
   /**
    * Направление отображения разделителя.
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Размер контейнера, в который вложен разделитель.
    *
    * Принимает значения дизайн-системы, числовые значения и css-переменные.
    */
-  size?: SpacingSizeProp;
+  size?: SpacingSizeProp | undefined;
   /**
    * Выравнивание разделителя в контейнере.
    */
-  align?: 'start' | 'center' | 'end';
+  align?: 'start' | 'center' | 'end' | undefined;
 }
 
 const appearanceClassNames = {

package/src/components/SimpleCell/Chevron/Chevron.tsx

@@ -9,7 +9,7 @@ const iconSize = {
 };
 
 export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
 }
 
 export const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {

package/src/components/SimpleCell/SimpleCell.module.css

@@ -1,6 +1,4 @@
 .host {
-  --vkui_internal--SimpleCell-before-inline-padding-end: var(--vkui--spacing_size_xl);
-
   display: flex;
   align-items: center;
   min-block-size: 48px;
@@ -27,8 +25,8 @@
   align-items: center;
   align-self: stretch;
   padding-block: var(--vkui--spacing_size_s);
-  padding-inline-end: var(--vkui_internal--SimpleCell-before-inline-padding-end);
-  color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
+  padding-inline-end: var(--vkui--spacing_size_xl);
+  color: var(--vkui--color_icon_accent);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -124,7 +122,7 @@
   align-items: center;
   align-self: stretch;
   padding-inline-start: var(--vkui--spacing_size_xl);
-  color: var(--vkui_internal--icon_color, var(--vkui--color_icon_accent));
+  color: var(--vkui--color_icon_accent);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */