@vkontakte/vkui 8.0.2 → 8.1.0

package/src/components/ChipsInputBase/types.ts

@@ -22,7 +22,7 @@ export type ChipOption = {
   /**
    * Блокировка взаимодействия с оцией.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   [index: string]: any;
 };
 
@@ -58,31 +58,31 @@ export interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Выбранные опции.
    */
-  value?: O[];
+  value?: O[] | undefined;
   /**
    * Выбранные опции по умолчанию.
    */
-  defaultValue?: O[];
+  defaultValue?: O[] | undefined;
   /**
    * Обработчик изменения выбранных опций.
    */
-  onChange?: OnChange<O>;
+  onChange?: OnChange<O> | undefined;
   /**
    * Значение поля ввода.
    */
-  inputValue?: string;
+  inputValue?: string | undefined;
   /**
    * Значение поля ввода по умолчанию.
    */
-  defaultInputValue?: string;
+  defaultInputValue?: string | undefined;
   /**
    * Обработчик изменения значения в поле ввода.
    */
-  onInputChange?: OnInputChange;
+  onInputChange?: OnInputChange | undefined;
   /**
    * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.
    * Принимает:
@@ -99,7 +99,7 @@ export interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {
    *    Например, при `delimiter=","` вставка "опция1,опция2,опция3" создаст
    *    три отдельные опции: "опция1", "опция2" и "опция3".
    */
-  delimiter?: string | RegExp | string[];
+  delimiter?: string | RegExp | string[] | undefined;
 }
 
 /**
@@ -125,45 +125,51 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
   /**
    * @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;
   /**
    * Добавляет значение в список на событие `onBlur`.
    */
-  addOnBlur?: boolean;
+  addOnBlur?: boolean | undefined;
   /**
    * Render prop функция для возврата своего компонента.
    *
    * @default Используется [Chip](#/Chip)
    */
-  renderChip?: RenderChip<O>;
+  renderChip?: RenderChip<O> | undefined;
   /**
    * Показывать ли кнопку для очистки значения.
    */
-  clearButtonShown?: boolean;
+  clearButtonShown?: boolean | undefined;
   /**
    * (e2e) testId кнопки очистки.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
   /**
    * Кастомная кнопка для очистки значения.
    * Должна принимать обязательное свойство `onClick`.
    */
-  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;
+  ClearButton?: React.ComponentType<FormFieldClearButtonProps> | undefined;
   /**
    * `aria-label` для списка выбранных опций.
    */
-  chipsListLabel?: string;
+  chipsListLabel?: string | undefined;
 }
 
 /**

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -81,43 +81,43 @@ export interface ChipsSelectProps<O extends ChipOption>
   /**
    * Расположение выпадающего списка.
    */
-  placement?: 'top' | 'bottom';
+  placement?: 'top' | 'bottom' | undefined;
   /**
    * Отрисовка Spinner вместо списка опций в выпадающем списке.
    */
-  fetching?: boolean;
+  fetching?: boolean | undefined;
   /**
    * Закрытие выпадающего списка после выбора элемента.
    */
-  closeAfterSelect?: boolean;
+  closeAfterSelect?: boolean | undefined;
   /**
    * Ширина раскрывающегося списка зависит от контента.
    */
-  dropdownAutoWidth?: boolean;
+  dropdownAutoWidth?: boolean | undefined;
   /**
    * Принудительно использовать портал.
    */
-  forceDropdownPortal?: boolean;
+  forceDropdownPortal?: boolean | undefined;
   /**
    * Передает атрибут `data-testid` для дропдауна.
    */
-  dropdownTestId?: string;
+  dropdownTestId?: string | undefined;
   /**
    * Иконка раскрывающегося списка.
    */
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | undefined;
   /**
    * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).
    */
-  addOnBlur?: boolean;
+  addOnBlur?: boolean | undefined;
   /**
    * Отключает максимальную высоту по умолчанию.
    */
-  noMaxHeight?: boolean;
+  noMaxHeight?: boolean | undefined;
   /**
    * Функция для отрисовки кастомной опции в выпадающем списке.
    */
-  renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;
+  renderOption?: ((props: CustomSelectOptionProps, option: O) => React.ReactNode) | undefined;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
    * В `defaultDropdownContent` содержится список опций.
@@ -130,17 +130,17 @@ export interface ChipsSelectProps<O extends ChipOption>
   /**
    * Событие срабатывающее перед `onChange`.
    */
-  onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;
+  onChangeStart?: ((event: React.MouseEvent | React.KeyboardEvent, option: O) => void) | undefined;
 
   /**
    * Отступ от выпадающего списка.
    */
-  dropdownOffsetDistance?: number;
+  dropdownOffsetDistance?: number | undefined;
 
   /**
    * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
-  allowClearButton?: boolean;
+  allowClearButton?: boolean | undefined;
 }
 
 /**

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -24,7 +24,7 @@ export interface UseChipsSelectProps<O extends ChipOption = ChipOption>
   /**
    * Список опций в выпадающем списке.
    */
-  options?: O[];
+  options?: O[] | undefined;
   /**
    * Возможность создавать чипы которых нет в списке:
    * - `true` – добавление по кнопке Enter;
@@ -32,31 +32,31 @@ export interface UseChipsSelectProps<O extends ChipOption = ChipOption>
    * Текст для пункта, создающего чипы при нажатии, также отвечает за то, будет ли показан этот пункт
    * (показывается после того как в списке не останется опций).
    */
-  creatable?: boolean | string;
+  creatable?: boolean | string | undefined;
   /**
    * Текст, который показывается если список опций пуст.
    */
-  emptyText?: string;
+  emptyText?: string | undefined;
   /**
    * Показывать или скрывать уже выбранные опции.
    */
-  selectedBehavior?: 'hide' | 'highlight';
+  selectedBehavior?: 'hide' | 'highlight' | undefined;
   /**
    * Функция для фильтрации опций в списке.
    */
-  filterFn?: false | FilterFn<O>;
+  filterFn?: false | FilterFn<O> | undefined;
   /**
    * Функция для сортировки опций в списке.
    */
-  sortFn?: false | SortFn<O>;
+  sortFn?: false | SortFn<O> | undefined;
   /**
    * Будет вызвано в момент скрытия выпадающего списка.
    */
-  onClose?: VoidFunction;
+  onClose?: VoidFunction | undefined;
   /**
    * Будет вызвано в момент открытия выпадающего списка.
    */
-  onOpen?: VoidFunction;
+  onOpen?: VoidFunction | undefined;
 }
 
 export const useChipsSelect = <O extends ChipOption>({
@@ -245,19 +245,20 @@ function transformOptions<O extends ChipOption>({
   filterFn = defaultFilterFn,
   options: optionsProp = DEFAULT_VALUE,
   selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,
-}: Required<Pick<UseChipsSelectProps<O>, 'value'>> &
-  Pick<
-    UseChipsSelectProps<O>,
-    | 'getOptionValue'
-    | 'getOptionLabel'
-    | 'inputValue'
-    | 'emptyText'
-    | 'creatable'
-    | 'filterFn'
-    | 'sortFn'
-    | 'options'
-    | 'selectedBehavior'
-  >) {
+}: {
+  value: O[];
+} & Pick<
+  UseChipsSelectProps<O>,
+  | 'getOptionValue'
+  | 'getOptionLabel'
+  | 'inputValue'
+  | 'emptyText'
+  | 'creatable'
+  | 'filterFn'
+  | 'sortFn'
+  | 'options'
+  | 'selectedBehavior'
+>) {
   const filteredOptionsProp = filterFn
     ? optionsProp.filter((option) => filterFn(inputValue, option, getOptionLabel))
     : optionsProp;

package/src/components/Clickable/Clickable.tsx

@@ -158,7 +158,7 @@ export interface ClickableProps<T = HTMLElement>
   /**
    * Компонент который будет при передаче `onClick`. По умолчанию `"div"`.
    */
-  DefaultComponent?: React.ElementType;
+  DefaultComponent?: React.ElementType | undefined;
 }
 
 /**

package/src/components/Clickable/useState.tsx

@@ -9,19 +9,19 @@ export interface StateProps {
   /**
    * Указывает, должен ли компонент реагировать на `hover`-состояние.
    */
-  hasHover?: boolean;
+  hasHover?: boolean | undefined;
   /**
    * Позволяет управлять `hovered`-состоянием извне.
    */
-  hovered?: boolean;
+  hovered?: boolean | undefined;
   /**
    * Позволяет управлять `activated`-состоянием извне.
    */
-  activated?: boolean;
+  activated?: boolean | undefined;
   /**
    * Указывает, должен ли компонент реагировать на `active`-состояние.
    */
-  hasActive?: boolean;
+  hasActive?: boolean | undefined;
 
   /**
    * Позволяет родительскому компоненту
@@ -38,7 +38,7 @@ export interface StateProps {
    *   <IconButton />
    * </Tappable>
    */
-  hasHoverWithChildren?: boolean;
+  hasHoverWithChildren?: boolean | undefined;
 
   /**
    * Позволяет родительскому компоненту показывать hovered-состояние при наведении
@@ -53,22 +53,22 @@ export interface StateProps {
    *   <IconButton />
    * </Tappable>
    */
-  unlockParentHover?: boolean;
+  unlockParentHover?: boolean | undefined;
 
   /**
    * Длительность показа `active`-состояния.
    */
-  activeEffectDelay?: number;
+  activeEffectDelay?: number | undefined;
 
   /**
    * Стиль подсветки `active`-состояния.
    */
-  activeClassName?: string;
+  activeClassName?: string | undefined;
 
   /**
    * Стиль подсветки `hover`-состояния.
    */
-  hoverClassName?: string;
+  hoverClassName?: string | undefined;
 }
 
 export const DEFAULT_ACTIVE_EFFECT_DELAY = 600;
@@ -79,8 +79,8 @@ interface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {
   /**
    * Блокирование активации состояний.
    */
-  lockState?: boolean;
-  setParentStateLock?: (v: boolean) => void;
+  lockState?: boolean | undefined;
+  setParentStateLock?: ((v: boolean) => void) | undefined;
 }
 
 /**
@@ -239,8 +239,8 @@ function useActive({
 }
 
 interface ClickableLockStateContextInterface {
-  lockHoverStateBubbling?: (v: boolean) => void;
-  lockActiveStateBubbling?: (v: boolean) => void;
+  lockHoverStateBubbling?: ((v: boolean) => void) | undefined;
+  lockActiveStateBubbling?: ((v: boolean) => void) | undefined;
 }
 
 export const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -6,6 +6,7 @@ import { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';
 import { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';
 import { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';
 import { excludeKeysWithUndefined } from '../../lib/utils';
+import type { PartialWithUndefined } from '../../types';
 import {
   ConfigProviderContext,
   type ConfigProviderContextInterface,
@@ -13,7 +14,7 @@ import {
   useConfigProviderContextMemo,
 } from './ConfigProviderContext';
 
-export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
+export interface ConfigProviderProps extends PartialWithUndefined<ConfigProviderContextInterface> {
   /**
    * Содержимое.
    */

package/src/components/ContentBadge/ContentBadge.tsx

@@ -54,17 +54,17 @@ export interface ContentBadgeProps
   /**
    * Вид отображения.
    */
-  mode?: ContentBadgeModeType;
+  mode?: ContentBadgeModeType | undefined;
   /**
    * Цвет оформления.
    */
-  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';
+  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay' | undefined;
   /**
    * Включает приближение значения закругления к форме круга.
    *
    * > Note: игнорируется при size="s".
    */
-  capsule?: boolean;
+  capsule?: boolean | undefined;
   /**
    * Определяет отступы и размер текста.
    *
@@ -74,7 +74,7 @@ export interface ContentBadgeProps
    * - size="m" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;
    * - size="l" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.
    */
-  size?: ContentBadgeSizeType;
+  size?: ContentBadgeSizeType | undefined;
 }
 
 /**

package/src/components/ContentCard/ContentCard.tsx

@@ -19,36 +19,36 @@ export interface ContentCardProps
   /**
    Текст над заголовком.
    */
-  overTitle?: React.ReactNode;
+  overTitle?: React.ReactNode | undefined;
   /**
    Заголовок.
    */
-  title?: React.ReactNode;
+  title?: React.ReactNode | undefined;
   /**
    Позволяет поменять тег используемый для заголовка.
    */
-  titleComponent?: React.ElementType;
+  titleComponent?: React.ElementType | undefined;
   /**
    Текст.
    */
-  description?: React.ReactNode;
+  description?: React.ReactNode | undefined;
   /**
    Нижний текст.
    */
-  caption?: React.ReactNode;
+  caption?: React.ReactNode | undefined;
   /**
     Максимальная высота изображения.
    */
-  maxHeight?: number;
+  maxHeight?: number | undefined;
   /**
    * Внешний вид карточки.
    */
-  mode?: CardProps['mode'];
+  mode?: CardProps['mode'] | undefined;
   /**
    * Пользовательское значения стиля `object-fit` для картинки
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
-  imageObjectFit?: React.CSSProperties['objectFit'];
+  imageObjectFit?: React.CSSProperties['objectFit'] | undefined;
 }
 
 /**

package/src/components/Counter/Counter.tsx

@@ -32,12 +32,12 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
   /**
    * Режим отображения счетчика.
    */
-  mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';
+  mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit' | undefined;
 
   /**
    * Внешний вид счетчика.
    */
-  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';
+  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom' | undefined;
 
   /**
    * Пользовательский цвет (работает только при appearance="custom")
@@ -46,11 +46,11 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
    * - При mode="tertiary" - изменяет цвет текста
    * - При mode="inherit" - не работает.
    */
-  color?: string;
+  color?: string | undefined;
   /**
    * Размер счетчика.
    */
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
 }
 
 /**

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -22,11 +22,11 @@ export interface CustomScrollViewProps
   /**
    * `className` для компонента.
    */
-  className?: HTMLDivElement['className'];
+  className?: HTMLDivElement['className'] | undefined;
   /**
    * Обработчик события `scroll`.
    */
-  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+  onScroll?: ((event: React.UIEvent<HTMLDivElement>) => void) | undefined;
   /**
    * Содержимое.
    */
@@ -34,21 +34,21 @@ export interface CustomScrollViewProps
   /**
    * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
    */
-  overscrollBehavior?: 'auto' | 'contain' | 'none';
+  overscrollBehavior?: 'auto' | 'contain' | 'none' | undefined;
   /**
    * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).
    */
-  scrollBehavior?: 'auto' | 'smooth';
+  scrollBehavior?: 'auto' | 'smooth' | undefined;
   /**
    * Включение отображения горизонтального скролла.
    */
-  enableHorizontalScroll?: boolean;
+  enableHorizontalScroll?: boolean | undefined;
   /**
    * Скрытие скроллбара.
    *
    * > В версии ниже Firefox 64 будет виден скролл.
    */
-  scrollbarHidden?: boolean;
+  scrollbarHidden?: boolean | undefined;
 }
 
 /**

package/src/components/CustomSelect/CustomSelect.module.css

@@ -26,12 +26,6 @@
   text-align: center;
 }
 
-.fetching {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .dropdownIcon {
   margin-inline-end: 10px;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["./CustomSelect.module.css"],"names":["host","popDown","popUp","control","empty","fetching","dropdownIcon","clearIcon","densityCompact","densityNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,S,WAPA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAiBAC,S,WAjBA;AAAA,E,aAqBAC,O,WArBA;AAAA,E,aA4BAC,U,WA5BA;AAAA,E,aAkCAC,c,WAlCA;AAAA,E,aAsCAC,W,WAtCA;AAAA,E,aA0CAC,gB,WA1CA;AAAA,E,aA0CgBF,c,WA1ChB;AAAA,E,aA8CAE,gB,WA9CA;AAAA,E,aA8CgBD,W,WA9ChB;AAAA,E,aAmDEE,a,WAnDF;AAAA,E,aAmDeH,c,WAnDf;AAAA,E,aAuDEG,a,WAvDF;AAAA,E,aAuDeF,W,WAvDf;AAAA;AAAA","file":"CustomSelect.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CustomSelect.module.css"],"names":["host","popDown","popUp","control","empty","dropdownIcon","clearIcon","densityCompact","densityNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,S,WAPA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAiBAC,S,WAjBA;AAAA,E,aAqBAC,O,WArBA;AAAA,E,aA4BAC,c,WA5BA;AAAA,E,aAgCAC,W,WAhCA;AAAA,E,aAoCAC,gB,WApCA;AAAA,E,aAoCgBF,c,WApChB;AAAA,E,aAwCAE,gB,WAxCA;AAAA,E,aAwCgBD,W,WAxChB;AAAA,E,aA6CEE,a,WA7CF;AAAA,E,aA6CeH,c,WA7Cf;AAAA,E,aAiDEG,a,WAjDF;AAAA,E,aAiDeF,W,WAjDf;AAAA;AAAA","file":"CustomSelect.module.css.d.ts","sourceRoot":""}