@vkontakte/vkui 8.0.1 → 8.1.0

package/src/hooks/useDateInput.ts

@@ -6,9 +6,9 @@ import { useBooleanState } from './useBooleanState';
 export interface UseDateInputDependencies<T, D> {
   maxElement: number;
   refs: Array<React.RefObject<T | null>>;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  value?: D | null;
+  autoFocus?: boolean | undefined;
+  disabled?: boolean | undefined;
+  value?: D | null | undefined;
   elementsConfig: (index: number) => {
     length: number;
     min: number;
@@ -17,8 +17,8 @@ export interface UseDateInputDependencies<T, D> {
   onInternalValueChange: (value: string[]) => void;
   getInternalValue: (value?: D | null | undefined) => string[];
   onClear: () => void;
-  onCalendarOpenChanged?: (opened: boolean) => void;
-  accessible?: boolean;
+  onCalendarOpenChanged?: ((opened: boolean) => void) | undefined;
+  accessible?: boolean | undefined;
 }
 
 export function useDateInput<T extends HTMLElement, D>({

package/src/hooks/useDraggableWithDomApi/types.ts

@@ -26,7 +26,7 @@ export type SwappedItemRange = { from: number; to: number };
 
 export interface UseDraggableProps<T extends HTMLElement = HTMLElement> {
   elRef: React.RefObject<T | null>;
-  onDragFinish?: (value: SwappedItemRange) => void;
+  onDragFinish?: ((value: SwappedItemRange) => void) | undefined;
 }
 
 export interface DraggableProps {

package/src/hooks/useEnsuredControl.ts

@@ -4,10 +4,10 @@ import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../lib/warnOnce';
 
 export interface UseEnsuredControlProps<V, E extends React.ChangeEvent<any>> {
-  value?: V;
+  value?: V | undefined;
   defaultValue: V;
   disabled?: boolean | undefined;
-  onChange?: (this: void, e: E) => any;
+  onChange?: ((this: void, e: E) => any) | undefined;
 }
 
 export function useEnsuredControl<V, E extends React.ChangeEvent<any>>({
@@ -33,10 +33,10 @@ export function useEnsuredControl<V, E extends React.ChangeEvent<any>>({
 }
 
 export interface UseCustomEnsuredControlProps<V> {
-  value?: V;
+  value?: V | undefined;
   defaultValue: V;
   disabled?: boolean | undefined;
-  onChange?: (this: void, v: V) => any;
+  onChange?: ((this: void, v: V) => any) | undefined;
 }
 
 const warn = warnOnce('useCustomEnsuredControl');

package/src/hooks/useFloatingElement.tsx

@@ -41,11 +41,11 @@ export type UseFloatingElementProps<
   ReferenceElement extends HTMLElement = HTMLElement,
 > = Omit<UseFloatingMiddlewaresBootstrapOptions, 'arrowRef'> &
   Omit<UseFloatingWithInteractionsProps, 'placement'> & {
-    onPlacementChange?: OnPlacementChange;
-    onReferenceHiddenChange?: (hidden: boolean) => void;
+    onPlacementChange?: OnPlacementChange | undefined;
+    onReferenceHiddenChange?: ((hidden: boolean) => void) | undefined;
     renderFloatingComponent: RenderFloatingComponentFn<FloatingElement>;
-    remapReferenceProps?: RemapReferencePropsFn<ReferenceElement>;
-    externalFloatingElementRef?: React.Ref<FloatingElement>;
+    remapReferenceProps?: RemapReferencePropsFn<ReferenceElement> | undefined;
+    externalFloatingElementRef?: React.Ref<FloatingElement> | undefined;
   };
 
 export type UseFloatingResult<ReferenceElement extends HTMLElement = HTMLElement> = {

package/src/hooks/useFocusTrap/FocusGuard.tsx

@@ -4,7 +4,7 @@ import type * as React from 'react';
 import { VisuallyHidden } from '../../components/VisuallyHidden/VisuallyHidden';
 
 interface FocusGuardProps {
-  onFocus?: (event: React.FocusEvent<HTMLSpanElement>) => void;
+  onFocus?: ((event: React.FocusEvent<HTMLSpanElement>) => void) | undefined;
 }
 
 export const FocusGuard = ({ onFocus }: FocusGuardProps) => (

package/src/hooks/useFocusTrap/useFocusTrap.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import type * as React from 'react';
+import { useRef } from 'react';
+import { arraysEquals } from '../../helpers/array';
 import { FOCUSABLE_ELEMENTS_LIST } from '../../lib/accessibility';
 import { getWindow } from '../../lib/dom';
 import { useMutationObserver } from '../useMutationObserver';
@@ -59,32 +61,28 @@ export type UseFocusTrapProps = {
    *
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Управление поведением автофокуса при появлении всплывающего окна.
    * При прокидывании `true` фокус будет установлен на первый элемент.
    * При прокидывании `root` фокус будет установлен в корень.
    * @default true
    */
-  autoFocus?: boolean | 'root';
+  autoFocus?: boolean | 'root' | undefined;
   /**
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
   /**
    * Время в миллисекундах после которого срабатывает автофокус при появлении всплывающего окна.
    * @default 0
    */
-  autoFocusDelay?: number;
-  /**
-   * Пользовательские опции для MutationObserver, который отслеживает изменения DOM внутри компонента и пересчитывает ноды для фокуса.
-   */
-  mutationObserverOptions?: MutationObserverInit;
+  autoFocusDelay?: number | undefined;
   /**
    * @default true
    */
-  mount?: boolean;
+  mount?: boolean | undefined;
 };
 
 export const useFocusTrap = (
@@ -95,9 +93,10 @@ export const useFocusTrap = (
     autoFocus = true,
     restoreFocus = true,
     autoFocusDelay = 0,
-    mutationObserverOptions,
   }: UseFocusTrapProps,
 ) => {
+  const prevFocusableRef = useRef<HTMLElement[]>([]);
+
   const createFocusFn = (getFocusElement: (root: HTMLElement | null) => HTMLElement | null) => {
     return () => {
       const node = getFocusElement(ref.current);
@@ -141,7 +140,12 @@ export const useFocusTrap = (
     const activeElement = doc.activeElement as HTMLElement;
     const focusableNodes = collectFocusable(parentNode);
 
+    if (arraysEquals(focusableNodes, prevFocusableRef.current)) {
+      return;
+    }
+
     if (focusableNodes.length === 0) {
+      prevFocusableRef.current = [];
       return;
     }
 
@@ -154,13 +158,11 @@ export const useFocusTrap = (
     if (nodeToFocus) {
       nodeToFocus.focus({ preventScroll: true });
     }
+
+    prevFocusableRef.current = focusableNodes;
   });
 
-  useMutationObserver(
-    ref,
-    () => ref.current && onMutateParentHandler(ref.current),
-    mutationObserverOptions,
-  );
+  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));
 
   const createGuardFocusHandler = (focusFn: () => void, focusFromOutside: () => void) => {
     return (event: React.FocusEvent<HTMLSpanElement>) => {

package/src/hooks/useFocusVisibleClassName.ts

@@ -18,12 +18,12 @@ export interface FocusVisibleModeProps {
   /**
    * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible
    */
-  focusVisibleMode?: FocusVisibleMode;
+  focusVisibleMode?: FocusVisibleMode | undefined;
 }
 
 export interface UseFocusVisibleClassNameProps {
-  focusVisible?: boolean;
-  mode?: FocusVisibleMode;
+  focusVisible?: boolean | undefined;
+  mode?: FocusVisibleMode | undefined;
 }
 
 /**

package/src/hooks/useGlobalEscKeyDown.ts

@@ -15,8 +15,8 @@ const EVENT_OPTIONS = {
  */
 export const useGlobalEscKeyDown = (
   init: boolean,
-  callback?: (event: KeyboardEvent) => void,
-  optionsProp?: AddEventListenerOptions,
+  callback?: ((event: KeyboardEvent) => void) | undefined,
+  optionsProp?: AddEventListenerOptions | undefined,
 ): void => {
   const { document } = useDOM();
 

package/src/hooks/useMediaQueryMatch.ts

@@ -0,0 +1,34 @@
+/* eslint-disable no-restricted-properties */
+import * as React from 'react';
+import { useDOM } from '../lib/dom';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+
+type Options = {
+  disable?: boolean | undefined;
+};
+
+export function useMediaQueryMatches(
+  media: string,
+  { disable }: Options = {},
+): boolean | undefined {
+  const { window } = useDOM();
+
+  const [matches, setMatches] = React.useState<boolean | undefined>(undefined);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!window || disable) {
+      return;
+    }
+    const match = window.matchMedia(media);
+    setMatches(match.matches);
+    /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */
+    const handleMediaQueryChange = (event: MediaQueryListEvent) => {
+      /* istanbul ignore next */
+      setMatches(event.matches);
+    };
+    match.addEventListener('change', handleMediaQueryChange);
+    return () => match.removeEventListener('change', handleMediaQueryChange);
+  }, [media, window]);
+
+  return matches;
+}

package/src/hooks/useMergeProps.ts

@@ -9,13 +9,13 @@ import { useExternRef } from './useExternRef';
 type BaseProps<T extends HTMLElement = HTMLElement> = HasRootRef<T> &
   Pick<AllHTMLAttributes<T>, 'className' | 'style'>;
 
-const filterProps = <T extends BaseProps = BaseProps>(props: T) => {
+const filterProps = <T extends BaseProps = BaseProps>(props: T): T => {
   return filterObject(props, (value) => value !== undefined);
 };
 
 export const useMergeProps = <T extends BaseProps = BaseProps>(
   originalProps: T,
-  slotProps?: T,
+  slotProps?: T | undefined,
 ): T => {
   const originalSlotGetRef = originalProps.getRootRef;
   const rootSlotGetRef = slotProps?.getRootRef;

package/src/hooks/useModalManager/types.ts

@@ -5,7 +5,7 @@ import type { ModalRootProps } from '../../components/ModalRoot/types';
 import type { HasDataAttribute } from '../../types';
 
 export type UseModalManagerProps = Omit<ModalRootProps, 'activeModal' | 'children'> & {
-  saveHistory?: boolean;
+  saveHistory?: boolean | undefined;
 };
 
 export type OpenModalPageProps = Omit<ModalPageProps, 'open' | 'keepMounted'> & HasDataAttribute;
@@ -16,16 +16,16 @@ export type CustomModalPageItem = Pick<OpenPageReturn, 'update' | 'close'> & {
   type: 'page';
   id: string;
   component: React.ComponentType<any>;
-  additionalProps?: any;
-  modalProps?: OpenModalPageProps;
+  additionalProps?: any | undefined;
+  modalProps?: OpenModalPageProps | undefined;
 };
 
 export type CustomModalCardItem = Pick<OpenCardReturn, 'update' | 'close'> & {
   type: 'card';
   id: string;
   component: React.ComponentType<any>;
-  additionalProps?: any;
-  modalProps?: OpenModalCardProps;
+  additionalProps?: any | undefined;
+  modalProps?: OpenModalCardProps | undefined;
 };
 
 export type ModalManagerItem = CustomModalPageItem | CustomModalCardItem;
@@ -57,10 +57,10 @@ export type CustomModalPayload<
   BaseProps extends OpenModalCardProps | OpenModalPageProps,
   AdditionalProps extends object = object,
 > = {
-  id?: string;
+  id?: string | undefined;
   component: React.ComponentType<CustomModalProps<BaseProps, AdditionalProps>>;
-  baseProps?: BaseProps;
-  additionalProps?: AdditionalProps;
+  baseProps?: BaseProps | undefined;
+  additionalProps?: AdditionalProps | undefined;
 };
 
 /**

package/src/hooks/usePagination.ts

@@ -6,19 +6,19 @@ interface UsePaginationProps {
   /**
    * Текущая страница.
    */
-  currentPage?: number;
+  currentPage?: number | undefined;
   /**
    * Кол-во всегда видимых страниц по краям текущей страницы.
    */
-  siblingCount?: number;
+  siblingCount?: number | undefined;
   /**
    * Кол-во всегда видимых страниц в начале и в конце.
    */
-  boundaryCount?: number;
+  boundaryCount?: number | undefined;
   /**
    * Общее кол-во страниц.
    */
-  totalPages?: number;
+  totalPages?: number | undefined;
 }
 
 export type PaginationPageType = 'start-ellipsis' | 'end-ellipsis' | number;

package/src/hooks/usePatchChildren.ts

@@ -13,7 +13,7 @@ const warn = warnOnce('usePatchChildren');
 
 type InjectProps<T> = React.HTMLAttributes<T> &
   React.Attributes & {
-    ref?: React.Ref<T>;
+    ref?: React.Ref<T> | undefined;
   };
 
 type ExpectedReactElement<T> = React.ReactElement<HasRootRef<T> & React.DOMAttributes<T>>;

package/src/hooks/useSnackbarManager/components/{SnackbarAnimatedWrapper.tsx → SnackbarAnimatedWrapper/SnackbarAnimatedWrapper.tsx}

@@ -3,9 +3,9 @@
 import { useEffect, useRef } from 'react';
 import type * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useCSSKeyframesAnimationController } from '../../../lib/animation';
-import { usePlatform } from '../../usePlatform';
-import type { SnackbarItem } from '../types';
+import { useCSSKeyframesAnimationController } from '../../../../lib/animation';
+import { usePlatform } from '../../../usePlatform';
+import type { SnackbarItem } from '../../types';
 import styles from './SnackbarAnimatedWrapper.module.css';
 
 const animationStateClassNames = {

package/src/hooks/useSnackbarManager/components/SnackbarHolder.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { SnackbarStore } from '../helpers/createSnackbarStore';
 import type { SnackbarPlacement, SnackbarsMap, UseSnackbar } from '../types';
-import { SnackbarsContainer } from './SnackbarsContainer';
+import { SnackbarsContainer } from './SnackbarsContainer/SnackbarsContainer';
 
 interface SnackbarHolderProps
   extends Pick<UseSnackbar.Props, 'offsetYStart' | 'offsetYEnd' | 'zIndex'> {
@@ -36,7 +36,11 @@ export const SnackbarHolder: React.FC<SnackbarHolderProps> = ({
       const placement = snackbar.snackbarProps.placement;
       const isClosing = state.snackbarsToClose.has(snackbar.id);
 
-      if (!map[placement]) {
+      if (placement === undefined) {
+        continue;
+      }
+
+      if (placement !== undefined && !map[placement]) {
         map[placement] = [];
         openedSnackbarsCountersByPlacement[placement] = 0;
         placements.push(placement);

package/src/hooks/useSnackbarManager/components/{SnackbarsContainer.tsx → SnackbarsContainer/SnackbarsContainer.tsx}

@@ -2,15 +2,15 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { Flex } from '../../../components/Flex/Flex';
-import type { SnackbarPlacement } from '../../../components/Snackbar/types';
-import type { CSSCustomProperties } from '../../../types';
-import type { SnackbarApi, SnackbarItem, UseSnackbar } from '../types';
-import { SnackbarAnimatedWrapper } from './SnackbarAnimatedWrapper';
+import { Flex } from '../../../../components/Flex/Flex';
+import type { SnackbarPlacement } from '../../../../components/Snackbar/types';
+import type { CSSCustomProperties } from '../../../../types';
+import type { SnackbarApi, SnackbarItem, UseSnackbar } from '../../types';
+import { SnackbarAnimatedWrapper } from '../SnackbarAnimatedWrapper/SnackbarAnimatedWrapper';
 import {
   SnackbarsContainerContext,
   type SnackbarsContainerContextData,
-} from './SnackbarsContainerContext';
+} from '../SnackbarsContainerContext';
 import styles from './SnackbarsContainer.module.css';
 /* eslint-disable jsdoc/require-jsdoc */
 

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 не пришёл