@vkontakte/vkui 8.0.2 → 8.1.0

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -19,7 +19,7 @@ import {
   type DateRangeType,
 } from '../CalendarRange/CalendarRange';
 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';
@@ -47,34 +47,34 @@ type DateTestsProps = {
   /**
    * Передает атрибут `data-testid` для поля ввода дня.
    */
-  day?: string;
+  day?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода месяца.
    */
-  month?: string;
+  month?: string | undefined;
   /**
    * Передает атрибут `data-testid` для поля ввода года.
    */
-  year?: string;
+  year?: string | undefined;
 };
 
 export type DateRangeInputTestsProps = {
   /**
    * Передает атрибуты `data-testid` для полей ввода начальной даты.
    */
-  startDateTestsProps?: DateTestsProps;
+  startDateTestsProps?: DateTestsProps | undefined;
   /**
    * Передает атрибуты `data-testid` для полей ввода конечной даты.
    */
-  endDateTestsProps?: DateTestsProps;
+  endDateTestsProps?: DateTestsProps | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки показа календаря.
    */
-  showCalendarButtonTestId?: string;
+  showCalendarButtonTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки очистки даты.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
 };
 
 export interface DateRangeInputProps
@@ -103,72 +103,72 @@ export interface DateRangeInputProps
   /**
    * Обработчик изменения выбранного промежутка.
    */
-  onChange?: (value: DateRangeType | null) => void;
+  onChange?: ((value: DateRangeType | null) => void) | undefined;
   /**
    * Передает атрибуты `data-testid` для интерактивных элементов в календаре.
    */
-  calendarTestsProps?: CalendarRangeTestsProps;
+  calendarTestsProps?: CalendarRangeTestsProps | undefined;
   /**
    * Расположение календаря относительно поля ввода.
    */
-  calendarPlacement?: PlacementWithAuto;
+  calendarPlacement?: PlacementWithAuto | undefined;
   /**
    * Автоматически закрывать календарь при изменениях.
    */
-  closeOnChange?: boolean;
+  closeOnChange?: boolean | undefined;
   /**
    * Обработчик изменения состояния открытия календаря.
    */
-  onCalendarOpenChanged?: (opened: boolean) => void;
+  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;
   /**
    * Label для календаря.
    */
-  calendarLabel?: string;
+  calendarLabel?: string | undefined;
   /**
    * Label для кнопки очистки. Делает доступным для ассистивных технологий.
    */
-  clearFieldLabel?: string;
+  clearFieldLabel?: string | undefined;
   /**
    * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.
    */
-  showCalendarLabel?: string;
+  showCalendarLabel?: string | undefined;
   /**
    * Label для ввода дня начальной даты. Делает доступным для ассистивных технологий.
    */
-  changeStartDayLabel?: string;
+  changeStartDayLabel?: string | undefined;
   /**
    * Label для ввода месяца начальной даты. Делает доступным для ассистивных технологий.
    */
-  changeStartMonthLabel?: string;
+  changeStartMonthLabel?: string | undefined;
   /**
    * Label для ввода года начальной даты. Делает доступным для ассистивных технологий.
    */
-  changeStartYearLabel?: string;
+  changeStartYearLabel?: string | undefined;
   /**
    * Label для ввода дня конечной даты. Делает доступным для ассистивных технологий.
    */
-  changeEndDayLabel?: string;
+  changeEndDayLabel?: string | undefined;
   /**
    * Label для ввода месяца конечной даты. Делает доступным для ассистивных технологий.
    */
-  changeEndMonthLabel?: string;
+  changeEndMonthLabel?: string | undefined;
   /**
    * Label для ввода года конечной даты. Делает доступным для ассистивных технологий.
    */
-  changeEndYearLabel?: string;
+  changeEndYearLabel?: string | undefined;
   /**
    * Отключение открытия календаря.
    */
-  disableCalendar?: boolean;
+  disableCalendar?: boolean | undefined;
   /**
    * Позволяет отключить захват фокуса при появлении календаря.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
   /**
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
   /**
    * @deprecated Since 8.0.0. Будет удалено в 9.0.0.
    *
@@ -181,7 +181,7 @@ export interface DateRangeInputProps
    * - календарь при открытии получает фокус, клавиатурный
    * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.
    */
-  accessible?: boolean /* TODO [>=v9] удалить свойство */;
+  accessible?: boolean /* TODO [>=v9] удалить свойство */ | undefined;
 }
 
 const elementsConfig = (index: number) => {
@@ -224,13 +224,6 @@ const getInternalValue = (value: CalendarRangeProps['value']) => {
   return newValue;
 };
 
-const CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
-  childList: true,
-  subtree: true,
-  attributes: true,
-  attributeFilter: ['tabindex'],
-};
-
 /**
  * @see https://vkui.io/components/date-range-input
  */
@@ -587,11 +580,10 @@ export const DateRangeInput = ({
           placement={calendarPlacement}
           onPlacementChange={setCalendarPlacement}
         >
-          <FocusTrapInternal
+          <FocusTrap
             rootRef={focusTrapRootRef}
             disabled={disableFocusTrap ?? !accessible}
             restoreFocus={restoreFocus ?? Boolean(accessible)}
-            mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}
           >
             <div ref={focusTrapRootRef}>
               <CalendarRange
@@ -614,7 +606,7 @@ export const DateRangeInput = ({
                 {...calendarTestsProps}
               />
             </div>
-          </FocusTrapInternal>
+          </FocusTrap>
         </Popper>
       )}
     </FormField>

package/src/components/DropZone/DropZone.tsx

@@ -6,7 +6,7 @@ import { callMultiple } from '../../lib/callMultiple';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
-import { DropZoneGrid } from './components/DropZoneGrid';
+import { DropZoneGrid } from './DropZoneGrid/DropZoneGrid';
 import styles from './DropZone.module.css';
 
 interface DropZonePropsChildrenProps {
@@ -20,7 +20,10 @@ export interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
   /**
    * Содержимое компонента. Можно прокинуть функцию для отрисовки содержимого.
    */
-  children?: React.ReactNode | ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);
+  children?:
+    | React.ReactNode
+    | ((renderProps: DropZonePropsChildrenProps) => React.ReactNode)
+    | undefined;
 }
 
 /**

package/src/components/DropZone/{components → DropZoneGrid}/DropZoneGrid.tsx

@@ -12,7 +12,7 @@ export interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElem
   /**
    * Направление дочерних компонентов.
    */
-  direction?: 'row' | 'column';
+  direction?: 'row' | 'column' | undefined;
 }
 
 export const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -13,7 +13,7 @@ import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditi
 import type { HTMLAttributesWithRootRef } from '../../types';
 
 export interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {
-  opened?: boolean;
+  opened?: boolean | undefined;
 }
 
 export const DropdownIcon = ({

package/src/components/Epic/Epic.tsx

@@ -13,7 +13,7 @@ export interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Компонент Tabbar, который будет отображаться снизу.
    */
-  tabbar?: React.ReactNode;
+  tabbar?: React.ReactNode | undefined;
   /**
    * `id` активного окна.
    */

package/src/components/Epic/ScrollSaver.tsx

@@ -7,7 +7,7 @@ import type { HasChildren } from '../../types';
 import { ScrollContext } from '../AppRoot/ScrollContext';
 
 export interface ScrollSaverProps extends HasChildren {
-  initialScroll?: number;
+  initialScroll?: number | undefined;
   saveScroll: (this: void, scroll: number) => any;
 }
 

package/src/components/File/File.tsx

@@ -33,20 +33,26 @@ export interface FileProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLInputElement>;
+  getRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в скрытый `input`.
    */
-  slotProps?: {
-    root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
-      HasRootRef<HTMLLabelElement> &
-      HasDataAttribute;
-    input?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> &
-      HasRootRef<HTMLInputElement> &
-      HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
+              HasRootRef<HTMLLabelElement> &
+              HasDataAttribute)
+          | undefined;
+        input?:
+          | (Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> &
+              HasRootRef<HTMLInputElement> &
+              HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
 }
 
 /**

package/src/components/FixedLayout/FixedLayout.tsx

@@ -24,17 +24,17 @@ export interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
   /**
    * Положение по вертикали, либо сверху, либо снизу.
    */
-  vertical?: 'top' | 'bottom';
+  vertical?: 'top' | 'bottom' | undefined;
   /**
    * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
    * Это часто необходимо для фиксированных кнопок в нижней части экрана.
    */
-  filled?: boolean;
+  filled?: boolean | undefined;
   /**
    * Всегда соответствовать ширине родителя.
    * Ширина пересчитывается по событию `window` `resize`.
    */
-  useParentWidth?: boolean;
+  useParentWidth?: boolean | undefined;
 }
 
 /**

package/src/components/Flex/Flex.tsx

@@ -13,7 +13,6 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import { FlexItem, type FlexItemProps } from './FlexItem/FlexItem';
 import styles from './Flex.module.css';
-import flexItemStyles from './FlexItem/FlexItem.module.css';
 
 export type { FlexItemProps };
 
@@ -34,14 +33,6 @@ const alignClassNames = {
   baseline: styles.alignBaseline,
 };
 
-const alignSelfClassNames = {
-  start: flexItemStyles.alignSelfStart,
-  end: flexItemStyles.alignSelfEnd,
-  center: flexItemStyles.alignSelfCenter,
-  baseline: flexItemStyles.alignSelfBaseline,
-  stretch: flexItemStyles.alignSelfStretch,
-};
-
 const displayClassNames = {
   'none': styles.displayNone,
   'inline-flex': styles.displayInlineFlex,
@@ -59,41 +50,37 @@ export interface FlexProps extends RootComponentProps<HTMLElement>, LayoutProps
   /**
    * Направление осей, эквивалентно `flex-direction`.
    */
-  direction?: 'row' | 'column';
+  direction?: 'row' | 'column' | undefined;
   /**
    * Отступы между элементами.
    * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
    * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.
    */
-  gap?: GapsProp;
+  gap?: GapsProp | undefined;
   /**
    * Отключает перенос контента, эквивалентно `flex-wrap=nowrap`.
    */
-  noWrap?: boolean;
+  noWrap?: boolean | undefined;
   /**
    * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
    */
-  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;
   /**
    * Выравнивание элементов по главной оси, эквивалентно `justify-content`.
    */
-  justify?: FlexContentProps;
+  justify?: FlexContentProps | undefined;
   /**
    * Значение `auto` позволяет задать платформенные отступы вокруг контейнера.
    */
-  margin?: 'none' | 'auto';
+  margin?: 'none' | 'auto' | undefined;
   /**
    * Для инвертирования направления, эквивалентно `row-reverse` `column-reverse`.
    */
-  reverse?: boolean;
-  /**
-   * Для задания выравнивания, отличного от установленного на родителе, эквивалентно `align-self`.
-   */
-  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+  reverse?: boolean | undefined;
   /**
    * Возможность задать css-свойство `display`.
    */
-  display?: 'none' | 'flex' | 'inline-flex';
+  display?: 'none' | 'flex' | 'inline-flex' | undefined;
 }
 
 /**
@@ -113,7 +100,6 @@ export const Flex: React.FC<FlexProps> & {
   noWrap = false,
   direction = 'row',
   reverse = false,
-  alignSelf,
   display = 'flex',
   ...restProps
 }: FlexProps) => {
@@ -129,7 +115,6 @@ export const Flex: React.FC<FlexProps> & {
         direction !== 'row' && styles.directionColumn,
         margin !== 'none' && styles.marginAuto,
         align && alignClassNames[align],
-        alignSelf && alignSelfClassNames[alignSelf],
         justify && justifyClassNames[justify],
         getGapsPresets(rowGap, columnGap),
         display !== 'flex' && displayClassNames[display],

package/src/components/Flex/FlexItem/FlexItem.module.css

@@ -15,25 +15,3 @@
 .flexFixed {
   flex: 0 0 auto;
 }
-
-/* align-self */
-
-.alignSelfStart {
-  align-self: start;
-}
-
-.alignSelfEnd {
-  align-self: end;
-}
-
-.alignSelfCenter {
-  align-self: center;
-}
-
-.alignSelfBaseline {
-  align-self: baseline;
-}
-
-.alignSelfStretch {
-  align-self: stretch;
-}

package/src/components/Flex/FlexItem/FlexItem.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./FlexItem.module.css"],"names":["flexGrow","flexShrink","flexContent","flexFixed","alignSelfStart","alignSelfEnd","alignSelfCenter","alignSelfBaseline","alignSelfStretch"],"mappings":"AAAA;AAAA,E,aAEAA,U,WAFA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAUAC,a,WAVA;AAAA,E,aAcAC,W,WAdA;AAAA,E,aAoBAC,gB,WApBA;AAAA,E,aAwBAC,c,WAxBA;AAAA,E,aA4BAC,iB,WA5BA;AAAA,E,aAgCAC,mB,WAhCA;AAAA,E,aAoCAC,kB,WApCA;AAAA;AAAA","file":"FlexItem.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./FlexItem.module.css"],"names":["flexGrow","flexShrink","flexContent","flexFixed"],"mappings":"AAAA;AAAA,E,aAEAA,U,WAFA;AAAA,E,aAMAC,Y,WANA;AAAA,E,aAUAC,a,WAVA;AAAA,E,aAcAC,W,WAdA;AAAA;AAAA","file":"FlexItem.module.css.d.ts","sourceRoot":""}

package/src/components/Flex/FlexItem/FlexItem.tsx

@@ -1,4 +1,4 @@
-import { classNames } from '@vkontakte/vkjs';
+import { type LayoutProps, resolveLayoutProps } from '../../../lib/layouts';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
 import type { RootComponentProps } from '../../RootComponent/RootComponent';
@@ -11,54 +11,27 @@ const flexClassNames = {
   fixed: styles.flexFixed,
 };
 
-const alignSelfClassNames = {
-  start: styles.alignSelfStart,
-  end: styles.alignSelfEnd,
-  center: styles.alignSelfCenter,
-  baseline: styles.alignSelfBaseline,
-  stretch: styles.alignSelfStretch,
-};
-
-export interface FlexItemProps extends RootComponentProps<HTMLElement> {
-  /**
-   * Для задания выравнивания, отлично от родительского, эквивалентно `align-self`.
-   */
-  alignSelf?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-  /**
-   * Позволяет задать предопределенные значения свойства `flex`:
-   *
-   * - `grow` соответствует значению `1 0 auto`
-   * - `shrink` соответствует значению `0 1 auto`
-   * - `content` соответствует значению `1 1 auto`
-   * - `fixed` соответствует значению `0 0 auto`.
-   */
-  flex?: 'grow' | 'shrink' | 'content' | 'fixed';
-  /**
-   * Изначальный размер элемента, эквивалентно `flex-basis`.
-   */
-  flexBasis?: number | string;
-}
+export type FlexItemProps = RootComponentProps<HTMLElement> &
+  Pick<LayoutProps, 'alignSelf' | 'justifySelf' | 'flexBasis'> & {
+    /**
+     * Позволяет задать предопределенные значения свойства `flex`:
+     *
+     * - `grow` соответствует значению `1 0 auto`
+     * - `shrink` соответствует значению `0 1 auto`
+     * - `content` соответствует значению `1 1 auto`
+     * - `fixed` соответствует значению `0 0 auto`.
+     */
+    flex?: 'grow' | 'shrink' | 'content' | 'fixed' | undefined;
+  };
 
 const warn = warnOnce('Flex.Item');
 
-export const FlexItem = ({
-  alignSelf,
-  flex,
-  flexBasis,
-  ...restProps
-}: FlexItemProps): React.ReactNode => {
+export const FlexItem = ({ flex, ...restProps }: FlexItemProps): React.ReactNode => {
   if (process.env.NODE_ENV === 'development') {
     warn('Компонент Flex.Item устарел, используйте компонент Box в качестве альтернативы.');
   }
 
-  return (
-    <RootComponent
-      baseStyle={{ flexBasis }}
-      baseClassName={classNames(
-        alignSelf && alignSelfClassNames[alignSelf],
-        flex && flexClassNames[flex],
-      )}
-      {...restProps}
-    />
-  );
+  const resolvedProps = resolveLayoutProps(restProps);
+
+  return <RootComponent baseClassName={flex && flexClassNames[flex]} {...resolvedProps} />;
 };

package/src/components/FloatingArrow/FloatingArrow.tsx

@@ -8,9 +8,9 @@ import styles from './FloatingArrow.module.css';
 
 export type Coords = {
   /** Координата x. */
-  x?: number;
+  x?: number | undefined;
   /** Координата y. */
-  y?: number;
+  y?: number | undefined;
 };
 
 export const placementClassNames = {
@@ -25,31 +25,31 @@ export interface FloatingArrowProps
   /**
    * Сдвиг стрелки относительно текущих координат.
    */
-  offset?: number;
+  offset?: number | undefined;
   /**
    * Включает абсолютное смещение по `offset`.
    */
-  isStaticOffset?: boolean;
+  isStaticOffset?: boolean | undefined;
   /**
    * Координаты стрелки.
    */
-  coords?: Coords;
+  coords?: Coords | undefined;
   /**
    * Расположение всплывающего элемента.
    */
-  placement?: Placement;
+  placement?: Placement | undefined;
   /**
    * Стили иконки.
    */
-  iconStyle?: React.CSSProperties;
+  iconStyle?: React.CSSProperties | undefined;
   /**
    * `className` для иконки.
    */
-  iconClassName?: string;
+  iconClassName?: string | undefined;
   /**
    * Иконка для отображения стрелки.
    */
-  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
+  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>> | undefined;
 }
 
 /**

package/src/components/FocusTrap/FocusTrap.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useFocusTrap, type UseFocusTrapProps } from '../../hooks/useFocusTrap';
-import { DEFAULT_MUTATION_OBSERVER_OPTIONS } from '../../hooks/useMutationObserver';
 import type { HasChildren } from '../../types';
 
 export interface FocusTrapInternalProps extends UseFocusTrapProps, HasChildren {
@@ -22,7 +21,6 @@ export const FocusTrapInternal = ({
   autoFocusDelay = 0,
   rootRef,
   children,
-  mutationObserverOptions = DEFAULT_MUTATION_OBSERVER_OPTIONS,
 }: FocusTrapInternalProps): React.ReactNode => {
   const { beforeGuard, afterGuard } = useFocusTrap(rootRef, {
     autoFocus,
@@ -30,7 +28,6 @@ export const FocusTrapInternal = ({
     disabled,
     mount,
     autoFocusDelay,
-    mutationObserverOptions,
   });
 
   return (

package/src/components/FormField/FormField.tsx

@@ -39,7 +39,7 @@ export interface FormFieldProps {
   /**
    * Статус отображения поля в форме.
    */
-  status?: 'default' | 'error' | 'valid';
+  status?: 'default' | 'error' | 'valid' | undefined;
   /**
    * Добавляет иконку слева.
    *
@@ -48,11 +48,11 @@ export interface FormFieldProps {
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
    * - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагирующая на нажатие.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Вертикальное выравнивание иконки слева.
    */
-  beforeAlign?: FieldIconsAlign;
+  beforeAlign?: FieldIconsAlign | undefined;
   /**
    * Добавляет иконку справа.
    *
@@ -61,22 +61,22 @@ export interface FormFieldProps {
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
    * - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагируюущая на нажатие.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Вертикальное выравнивание иконки справа.
    */
-  afterAlign?: FieldIconsAlign;
+  afterAlign?: FieldIconsAlign | undefined;
   /**
    * Режим отображения.
    *
    * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.
    * - `plain` — показывает только текст-подсказку.
    */
-  mode?: 'default' | 'plain';
+  mode?: 'default' | 'plain' | undefined;
   /**
    * Максимальная высота поля.
    */
-  maxHeight?: number;
+  maxHeight?: number | undefined;
 }
 
 export interface FormFieldOwnProps
@@ -87,7 +87,7 @@ export interface FormFieldOwnProps
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 
 /**

package/src/components/FormFieldClearButton/FormFieldClearButton.tsx

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

package/src/components/FormItem/FormItem.module.css

@@ -67,8 +67,7 @@
   color: var(--vkui--color_text_negative);
 }
 
-.statusValid .bottom,
-.verified .bottom {
+.statusValid .bottom {
   color: var(--vkui--color_text_positive);
 }