@vkontakte/vkui 8.0.2 → 8.1.0

package/src/hooks/useSnackbarManager/types.ts

@@ -14,10 +14,10 @@ export namespace CustomSnackbar {
     };
 
   export type Payload<AdditionalProps extends object = object> = {
-    id?: string;
+    id?: string | undefined;
     component: React.ComponentType<Props<AdditionalProps>>;
-    baseProps?: SnackbarApi.OpenProps;
-    additionalProps?: AdditionalProps;
+    baseProps?: SnackbarApi.OpenProps | undefined;
+    additionalProps?: AdditionalProps | undefined;
   };
 }
 
@@ -91,25 +91,25 @@ export namespace UseSnackbar {
     /**
      * Максимальное число открытых на одном `placement` снекбаров
      */
-    limit?: number;
+    limit?: number | undefined;
     /**
      * Поведение переполнения очереди снекбаров:
      * - `"queue"` - снекбары не откроются, пока для них не появится место.
      * - `"shift"` - снекбары форсируют закрытие более старых снекбаров, чтобы освободить место. Значение по умолчанию.
      */
-    queueStrategy?: SnackbarApi.QueueStrategy;
+    queueStrategy?: SnackbarApi.QueueStrategy | undefined;
     /**
      * Вертикальный отступ контейнера со снекбарами от верха. Полезно, когда на странице используется компонент `FixedLayout`.
      */
-    offsetYStart?: SnackbarApi.OffsetY;
+    offsetYStart?: SnackbarApi.OffsetY | undefined;
     /**
      * Вертикальный отступ контейнера со снекбарами от низа. Полезно, когда на странице используется компонент `FixedLayout`.
      */
-    offsetYEnd?: SnackbarApi.OffsetY;
+    offsetYEnd?: SnackbarApi.OffsetY | undefined;
     /**
      * Свойство для установки стиля `z-index` на контейнере снекбаров.
      */
-    zIndex?: number | string;
+    zIndex?: number | string | undefined;
   }
 
   export type Return = [SnackbarApi.Api, React.ReactElement | null];
@@ -118,15 +118,15 @@ export namespace UseSnackbar {
 export type SnackbarItem = Pick<SnackbarApi.OpenReturn, 'close' | 'update'> & {
   id: string;
   component: React.ComponentType<any>;
-  additionalProps?: any;
+  additionalProps?: any | undefined;
   snackbarProps: SnackbarData;
 };
 
 export type CommonOnOpenPayload = Pick<SnackbarApi.OpenReturn, 'close' | 'update'> & {
   id: string;
   component: React.ComponentType<CustomSnackbar.Props<any>>;
-  snackbarProps?: SnackbarApi.OpenProps;
-  additionalProps?: any;
+  snackbarProps?: SnackbarApi.OpenProps | undefined;
+  additionalProps?: any | undefined;
 };
 
 export { type SnackbarPlacement } from '../../components/Snackbar/types';

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -12,7 +12,7 @@ export function useSyncHTMLWithBaseVKUIClasses({
 }: {
   appRootRef: React.RefObject<HTMLElement | null>;
   mode: AppRootMode;
-  layout?: AppRootLayout;
+  layout?: AppRootLayout | undefined;
   enable: boolean;
 }) {
   useIsomorphicLayoutEffect(() => {

package/src/index.ts

@@ -135,7 +135,10 @@ export type {
 export { ActionSheetItem } from './components/ActionSheetItem/ActionSheetItem';
 export type { ActionSheetItemProps } from './components/ActionSheetItem/ActionSheetItem';
 export { ActionSheetDefaultIosCloseItem } from './components/ActionSheet/ActionSheetDefaultIosCloseItem';
-export { FocusTrap, type FocusTrapProps } from './components/FocusTrap/FocusTrap';
+export {
+  FocusTrap,
+  type FocusTrapProps,
+} from './components/FocusTrap/FocusTrap';
 export { ScreenSpinner } from './components/ScreenSpinner/ScreenSpinner';
 export { ScreenSpinnerContext } from './components/ScreenSpinner/context';
 export type { ScreenSpinnerProps } from './components/ScreenSpinner/ScreenSpinner';
@@ -315,6 +318,7 @@ export {
 } from './components/Accordion/AccordionContext';
 export type { AccordionSummaryProps } from './components/Accordion/AccordionSummary';
 export type { AccordionContentProps } from './components/Accordion/AccordionContent';
+export type { AccordionIconProps } from './components/Accordion/AccordionIcon';
 
 /**
  * Forms
@@ -513,7 +517,7 @@ export { useNavId } from './components/NavIdContext/useNavId';
 export type { TransitionDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
 export { useCSSKeyframesAnimationController as unstable_useCSSKeyframesAnimationController } from './lib/animation';
 export { useFocusVisible } from './hooks/useFocusVisible';
-export { useReducedMotion as unstable_useReducedMotion } from './lib/animation';
+export { useReducedMotion } from './lib/animation';
 
 /**
  * Utils

package/src/lib/SSR.tsx

@@ -7,10 +7,10 @@ import type { Direction } from './direction';
 import { platform as getPlatform } from './platform';
 
 export interface SSRWrapperProps {
-  userAgent?: string;
-  browserInfo?: BrowserInfo;
-  direction?: Direction;
-  children?: React.ReactNode;
+  userAgent?: string | undefined;
+  browserInfo?: BrowserInfo | undefined;
+  direction?: Direction | undefined;
+  children?: React.ReactNode | undefined;
 }
 
 /**

package/src/lib/accessibility.ts

@@ -144,7 +144,7 @@ export const injectAriaExpandedPropByRole = (
 interface HasAccessibleNameProps
   extends Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby'>,
     HasChildren {
-  title?: string;
+  title?: string | undefined;
 }
 
 export function hasAccessibleName({

package/src/lib/adaptivity/functions.ts

@@ -183,38 +183,47 @@ export function viewWidthToClassName<T extends Partial<CSSBreakpointsClassNames>
   viewWidth: ViewWidthType | 'none' = 'none',
 ): string | null {
   if (viewWidth === 'none') {
-    return breakpointClassNames.hasOwnProperty('none') ? breakpointClassNames['none']! : null;
+    return breakpointClassNames.hasOwnProperty('none')
+      ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        breakpointClassNames['none']!
+      : null;
   }
 
   const breakpoints: string[] = [];
   const breakpointName = VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP[viewWidth];
 
   if (breakpointClassNames.hasOwnProperty(breakpointName)) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     breakpoints.push(breakpointClassNames[breakpointName]!);
   }
 
   if (viewWidth >= ViewWidth.MOBILE) {
     if (breakpointClassNames.hasOwnProperty('mobilePlus')) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       breakpoints.push(breakpointClassNames['mobilePlus']!);
     }
   }
 
   if (viewWidth >= ViewWidth.SMALL_TABLET) {
     if (breakpointClassNames.hasOwnProperty('smallTabletPlus')) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       breakpoints.push(breakpointClassNames['smallTabletPlus']!);
     }
   } else {
     if (breakpointClassNames.hasOwnProperty('smallTabletMinus')) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       breakpoints.push(breakpointClassNames['smallTabletMinus']!);
     }
   }
 
   if (viewWidth >= ViewWidth.TABLET) {
     if (breakpointClassNames.hasOwnProperty('tabletPlus')) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       breakpoints.push(breakpointClassNames['tabletPlus']!);
     }
   } else {
     if (breakpointClassNames.hasOwnProperty('tabletMinus')) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       breakpoints.push(breakpointClassNames['tabletMinus']!);
     }
   }

package/src/lib/animation/useCSSKeyframesAnimationController.ts

@@ -4,12 +4,12 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 
 export type UseCSSAnimationControllerCallback = {
-  onEnter?: VoidFunction;
-  onEntering?: VoidFunction;
-  onEntered?: VoidFunction;
-  onExit?: VoidFunction;
-  onExiting?: VoidFunction;
-  onExited?: VoidFunction;
+  onEnter?: VoidFunction | undefined;
+  onEntering?: VoidFunction | undefined;
+  onEntered?: VoidFunction | undefined;
+  onExit?: VoidFunction | undefined;
+  onExiting?: VoidFunction | undefined;
+  onExited?: VoidFunction | undefined;
 };
 
 export type AnimationState = 'enter' | 'entering' | 'entered' | 'exit' | 'exiting' | 'exited';

package/src/lib/animation/useCSSTransition.ts

@@ -19,22 +19,22 @@ export type UseCSSTransitionState =
   | 'exited';
 
 export type UseCSSTransitionOptions = {
-  enableAppear?: boolean;
-  enableEnter?: boolean;
-  enableExit?: boolean;
-  onEnter?: (appear?: boolean) => void;
-  onEntering?: (appear?: boolean) => void;
-  onEntered?: (propertyName?: string, appear?: boolean) => void;
-  onExit?: () => void;
-  onExiting?: () => void;
-  onExited?: (propertyName?: string) => void;
+  enableAppear?: boolean | undefined;
+  enableEnter?: boolean | undefined;
+  enableExit?: boolean | undefined;
+  onEnter?: ((appear?: boolean) => void) | undefined;
+  onEntering?: ((appear?: boolean) => void) | undefined;
+  onEntered?: ((propertyName?: string, appear?: boolean) => void) | undefined;
+  onExit?: (() => void) | undefined;
+  onExiting?: (() => void) | undefined;
+  onExited?: ((propertyName?: string) => void) | undefined;
 };
 
 export type UseCSSTransition<Ref extends Element = Element> = [
   state: UseCSSTransitionState,
   {
     ref: React.RefObject<Ref | null>;
-    onTransitionEnd?: TransitionEventHandler;
+    onTransitionEnd?: TransitionEventHandler | undefined;
   },
 ];
 
@@ -48,7 +48,7 @@ const TRANSITION_FALLBACK_DELAY = 100;
  * @private
  */
 export const useCSSTransition = <Ref extends Element = Element>(
-  inProp?: boolean,
+  inProp?: boolean | undefined,
   {
     enableAppear = false,
     enableEnter = true,
@@ -211,8 +211,10 @@ export const useCSSTransition = <Ref extends Element = Element>(
           Math.max(...style.transitionDelay.split(',').map(parseTime));
 
         if (duration <= 0) {
-          completeTransition();
-          return;
+          // Даже для нулевой длительности завершаем переход асинхронно, чтобы
+          // промежуточные состояния были наблюдаемы и не возникали sync-гонки с unmount.
+          timerRef.current = setTimeout(completeTransition, 0);
+          return clearTimer;
         }
 
         // fallback если onTransitionEnd не пришёл

package/src/lib/animation/useReducedMotion.ts

@@ -1,7 +1,4 @@
-/* eslint-disable no-restricted-properties */
-import * as React from 'react';
-import { useDOM } from '../dom';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useMediaQueryMatches } from '../../hooks/useMediaQueryMatch';
 
 export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
 
@@ -12,25 +9,5 @@ export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: re
  * `false` - если нет, и `undefined` во время серверного рендеринга или во время первого рендеринга на клиенте.
  */
 export const useReducedMotion = (): boolean | undefined => {
-  const { window } = useDOM();
-
-  const [reducedMotion, setReducedMotion] = React.useState<boolean | undefined>(undefined);
-
-  useIsomorphicLayoutEffect(() => {
-    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
-    if (!window) {
-      return;
-    }
-    const match = window.matchMedia(REDUCE_MOTION_MEDIA_QUERY);
-    setReducedMotion(match.matches);
-    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */
-    const handleMediaQueryChange = (event: MediaQueryListEvent) => {
-      /* istanbul ignore next */
-      setReducedMotion(event.matches);
-    };
-    match.addEventListener('change', handleMediaQueryChange);
-    return () => match.removeEventListener('change', handleMediaQueryChange);
-  }, [window]);
-
-  return reducedMotion;
+  return useMediaQueryMatches(REDUCE_MOTION_MEDIA_QUERY);
 };

package/src/lib/calendar.ts

@@ -183,7 +183,10 @@ export const isLastDay = (day: Date, dayOfWeek: number): boolean =>
 /**
  * Возвращает дату, ограниченную `min` и/или `max` значениями
  */
-export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date {
+export function clamp(
+  day: Date,
+  options: { min?: Date | undefined; max?: Date | undefined } = {},
+): Date {
   const { min, max } = options;
   if (min && day < min) {
     return min;
@@ -199,7 +202,7 @@ export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date
  */
 export function isDayMinMaxRestricted(
   day: Date,
-  options: { min?: Date; max?: Date; withTime?: boolean } = {},
+  options: { min?: Date | undefined; max?: Date | undefined; withTime?: boolean | undefined } = {},
 ): boolean {
   const { min, max, withTime = false } = options;
   if (!withTime && ((min && isSameDate(day, min)) || (max && isSameDate(day, max)))) {

package/src/lib/date.ts

@@ -114,8 +114,8 @@ export function parse(input: string, format: string, referenceDate: Date = new D
 }
 
 export const convertDateToTimeZone = (
-  date?: Date | null,
-  timezone?: string,
+  date?: Date | null | undefined,
+  timezone?: string | undefined,
 ): Date | undefined | null => {
   if (!timezone) {
     return date;
@@ -141,13 +141,13 @@ export const convertDateFromTimeZone = (date: Date | null, timezone?: string): D
 };
 
 export type CreateDateInTimeZoneOverrides = {
-  year?: number;
-  month?: number;
-  date?: number;
-  hours?: number;
-  minutes?: number;
-  seconds?: number;
-  milliseconds?: number;
+  year?: number | undefined;
+  month?: number | undefined;
+  date?: number | undefined;
+  hours?: number | undefined;
+  minutes?: number | undefined;
+  seconds?: number | undefined;
+  milliseconds?: number | undefined;
 };
 
 export function createDateInTimeZone(
@@ -216,7 +216,7 @@ export function endOfMonth(date: Date): Date {
   return result;
 }
 
-type WeekOptions = { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 };
+type WeekOptions = { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined };
 
 export const MONDAY = 1;
 
@@ -285,7 +285,7 @@ export function startOfMinute(date: Date): Date {
 export function eachDayOfInterval(
   startDate: Date,
   endDate: Date,
-  { step = 1 }: { step?: number } = {},
+  { step = 1 }: { step?: number | undefined } = {},
 ): Date[] {
   let reversed = +startDate > +endDate;
   const endTime = reversed ? +startDate : +endDate;

package/src/lib/dom.tsx

@@ -25,11 +25,11 @@ export interface DOMContextInterface {
   /**
    * @ignore
    */
-  window?: Window;
+  window?: Window | undefined;
   /**
    * @ignore
    */
-  document?: Document;
+  document?: Document | undefined;
 }
 
 export type DOMProps = DOMContextInterface;

package/src/lib/floating/functions.ts

@@ -20,8 +20,8 @@ export type ConvertFloatingDataArgs = {
   strategy: FloatingPositionStrategy;
   x: UseFloatingData['x'];
   y: UseFloatingData['y'];
-  initialWidth?: React.CSSProperties['width'] | null;
-  middlewareData?: UseFloatingData['middlewareData'];
+  initialWidth?: React.CSSProperties['width'] | null | undefined;
+  middlewareData?: UseFloatingData['middlewareData'] | undefined;
 };
 
 /**

package/src/lib/floating/types/component.ts

@@ -29,7 +29,7 @@ export interface FloatingComponentProps
    * в аргументе функции можно получить метод `onClose`, с помощью которого можно программно закрывать
    * всплывающее окно.
    */
-  content?: React.ReactNode | FloatingContentRenderProp;
+  content?: React.ReactNode | FloatingContentRenderProp | undefined;
   /**
    * Целевой элемент. Всплывающее окно появится возле него.
    *
@@ -37,36 +37,36 @@ export interface FloatingComponentProps
    * > 1. предоставлять параметры либо `getRootRef`, либо `ref` (cм. `React.forwardRef()`) для получения ссылки на DOM-узел;
    * > 2. принимать DOM атрибуты и события.
    */
-  children?: React.ReactElement;
+  children?: React.ReactElement | undefined;
   /**
    * Нужно ли при навигации с клавиатуры авто-фокусироваться на всплывающий элемент.
    */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /**
    * Нужно ли после закрытия всплывающего элемента возвращать фокус на предыдущий активный элемент.
    */
-  restoreFocus?: RestoreFocusType;
+  restoreFocus?: RestoreFocusType | undefined;
   /**
    * Перебивает zIndex заданный по умолчанию.
    */
-  zIndex?: number | string;
+  zIndex?: number | string | undefined;
   /**
    * По умолчанию используется document.body.
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement>;
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | undefined;
   /**
    * В зависимости от области видимости, позиция может смениться на более оптимальную,
    * чтобы всплывающий элемент вместился в эту область видимости.
    */
-  onPlacementChange?: OnPlacementChange;
+  onPlacementChange?: OnPlacementChange | undefined;
   /**
    * Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`.
    *
    * > Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента
    */
-  onReferenceHiddenChange?: (hidden: boolean) => void;
+  onReferenceHiddenChange?: ((hidden: boolean) => void) | undefined;
   /**
    * Позволяет отключить захват фокуса.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
 }

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -22,58 +22,60 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.
    */
-  placement?: PlacementWithAuto;
+  placement?: PlacementWithAuto | undefined;
   /**
    * Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места.
    * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
    */
-  disableFlipMiddleware?: boolean;
+  disableFlipMiddleware?: boolean | undefined;
   /**
    * Позволяет отключить смещение по главной оси,
    * которое не даёт всплывающему элементу выходить за границы видимой области.
    */
-  disableShiftMiddleware?: boolean;
+  disableShiftMiddleware?: boolean | undefined;
   /**
    * Задаёт резервный вариант размещения по перпендикулярной оси.
    */
-  flipMiddlewareFallbackAxisSideDirection?: FlipMiddlewareOptions['fallbackAxisSideDirection'];
+  flipMiddlewareFallbackAxisSideDirection?:
+    | FlipMiddlewareOptions['fallbackAxisSideDirection']
+    | undefined;
   /**
    * Отступ по главной оси.
    */
-  offsetByMainAxis?: number;
+  offsetByMainAxis?: number | undefined;
   /**
    * Отступ по вспомогательной оси.
    */
-  offsetByCrossAxis?: number;
+  offsetByCrossAxis?: number | undefined;
   /**
    * Отступ для смещения.
    */
-  overflowPadding?: ShiftMiddlewareOptions['padding'];
-  arrowRef?: ArrowOptions['element'];
+  overflowPadding?: ShiftMiddlewareOptions['padding'] | undefined;
+  arrowRef?: ArrowOptions['element'] | undefined;
   /**
    * Отображать ли стрелку, указывающую на якорный элемент.
    */
-  arrow?: boolean;
+  arrow?: boolean | undefined;
   /**
    * Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент.
    */
-  arrowHeight?: number;
+  arrowHeight?: number | undefined;
   /**
    * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
    */
-  arrowPadding?: number;
+  arrowPadding?: number | undefined;
   /**
    * Выставлять ширину равной target элементу.
    */
-  sameWidth?: boolean;
+  sameWidth?: boolean | undefined;
   /**
    * Позволяет задать или переопределить модификаторы библиотеки **Floating UI** (подробнее в документации про [middleware](https://floating-ui.com/docs/middleware)).
    */
-  customMiddlewares?: UseFloatingMiddleware[];
+  customMiddlewares?: UseFloatingMiddleware[] | undefined;
   /**
    * Принудительно скрывает компонент если целевой элемент вышел за область видимости.
    */
-  hideWhenReferenceHidden?: boolean;
+  hideWhenReferenceHidden?: boolean | undefined;
 }
 
 export const useFloatingMiddlewaresBootstrap = ({
@@ -104,7 +106,11 @@ export const useFloatingMiddlewaresBootstrap = ({
       }),
     ];
 
-    const shift = disableShiftMiddleware ? null : shiftMiddleware({ padding: overflowPadding });
+    const shift = disableShiftMiddleware
+      ? null
+      : overflowPadding !== undefined
+        ? shiftMiddleware({ padding: overflowPadding })
+        : shiftMiddleware();
 
     // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
     if (isAutoPlacement) {
@@ -153,10 +159,11 @@ export const useFloatingMiddlewaresBootstrap = ({
     // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/arrow.mdx#order
     if (arrow) {
       middlewares.push(
-        arrowMiddleware({
-          element: arrowRef,
-          padding: arrowPadding,
-        }),
+        arrowMiddleware(
+          arrowPadding !== undefined
+            ? { element: arrowRef ?? null, padding: arrowPadding }
+            : { element: arrowRef ?? null },
+        ),
       );
     }
 

package/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -25,7 +25,7 @@ export type ShownChangeReason =
 export type OnShownChange = (shown: boolean, reason?: ShownChangeReason) => void;
 
 export interface UseFloatingWithInteractionsProps {
-  placement?: Placement;
+  placement?: Placement | undefined;
   /**
    * Стратегия позиционирования всплывающего элемента.
    *
@@ -34,8 +34,8 @@ export interface UseFloatingWithInteractionsProps {
    *
    * > `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative`
    */
-  strategy?: FloatingPositionStrategy;
-  middlewares?: UseFloatingMiddleware[];
+  strategy?: FloatingPositionStrategy | undefined;
+  middlewares?: UseFloatingMiddleware[] | undefined;
   /**
    * Механика вызова всплывающего элемента.
    *
@@ -52,7 +52,7 @@ export interface UseFloatingWithInteractionsProps {
    *
    * **Избегайте использования `trigger="hover"` как единственного механизма активации, так как пользователи клавиатуры или скринридеров не смогут использовать компонент**
    */
-  trigger?: TriggerType;
+  trigger?: TriggerType | undefined;
   /**
    * Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента
    * при наведении.
@@ -61,43 +61,43 @@ export interface UseFloatingWithInteractionsProps {
    *
    * > Используется только для `trigger="hover"`.
    */
-  hoverDelay?: number | [number, number];
+  hoverDelay?: number | [number, number] | undefined;
   /**
    * При `trigger="hover"` закрывает всплывающий элемент при нажатии на целевой элемент.
    */
-  closeAfterClick?: boolean;
+  closeAfterClick?: boolean | undefined;
   /**
    * Блокирует изменение состояния.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Отключает взаимодействие со всплывающим элементом.
    */
-  disableInteractive?: boolean;
+  disableInteractive?: boolean | undefined;
   /**
    * Отключает закрытие нажатием на область вне целевого и всплывающего элемента.
    */
-  disableCloseOnClickOutside?: boolean;
+  disableCloseOnClickOutside?: boolean | undefined;
   /**
    * Отключает закрытие нажатием на кнопку ESC.
    */
-  disableCloseOnEscKey?: boolean;
+  disableCloseOnEscKey?: boolean | undefined;
   /**
    * Начальное состояние всплывающего элемента.
    */
-  defaultShown?: boolean;
+  defaultShown?: boolean | undefined;
   /**
    * Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства.
    */
-  shown?: boolean;
+  shown?: boolean | undefined;
   /**
    * Вызывается при каждом изменении видимости всплывающего элемента.
    */
-  onShownChange?: OnShownChange;
+  onShownChange?: OnShownChange | undefined;
   /**
    * Вызывается при каждом изменении видимости всплывающего элемента, но после завершении анимации.
    */
-  onShownChanged?: OnShownChange;
+  onShownChanged?: OnShownChange | undefined;
 }
 
 export type ReferenceProps<T = HTMLElement> = Omit<
@@ -123,6 +123,6 @@ export interface UseFloatingWithInteractionsReturn<T extends HTMLElement = HTMLE
   floatingProps: FloatingProps<T>;
   middlewareData: UseFloatingData['middlewareData'];
   onClose: (this: void) => void;
-  onEscapeKeyDown?: (this: void) => void;
+  onEscapeKeyDown?: ((this: void) => void) | undefined;
   onRestoreFocus: (restoreFocus?: RestoreFocusType) => boolean | HTMLElement;
 }

package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -90,8 +90,8 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({
     strategy: strategyProp,
     placement: placementProp,
-    middleware: middlewares,
-    whileElementsMounted: isLock ? undefined : whileElementsMounted,
+    ...(middlewares !== undefined ? { middleware: middlewares } : {}),
+    ...(!isLock && { whileElementsMounted }),
   });
 
   const commitShownLocalState = React.useCallback(