@vkontakte/vkui 8.0.2 → 8.1.1

package/src/components/View/View.tsx

@@ -38,21 +38,21 @@ export interface ViewProps extends HTMLAttributesWithRootRef<HTMLElement>, NavId
   /**
    * Обработчик свайпа назад.
    */
-  onSwipeBack?: () => void;
+  onSwipeBack?: (() => void) | undefined;
   /**
    * Обработчик начала анимации свайпа назад.
    *
    * Чтобы остановить свайп назад, возвращайте `"prevent"`.
    */
-  onSwipeBackStart?: (activePanel: string | null) => void | 'prevent';
+  onSwipeBackStart?: ((activePanel: string | null) => void | 'prevent') | undefined;
   /**
    * Обработчик завершения анимации отмененного пользователем свайпа.
    */
-  onSwipeBackCancel?: () => void;
+  onSwipeBackCancel?: (() => void) | undefined;
   /**
    * Массив из id панелей в порядке открытия.
    */
-  history?: string[];
+  history?: string[] | undefined;
   /**
    * Коллекция Panel. У каждой Panel должен быть уникальный `id`.
    */

package/src/components/View/ViewInfinite.tsx

@@ -47,39 +47,39 @@ export interface ViewInfiniteProps
   /**
    * Обработчик, который вызывается при завершении анимации смены активной панели.
    */
-  onTransition?: (params: TransitionParams & { isBack: boolean }) => void;
+  onTransition?: ((params: TransitionParams & { isBack: boolean }) => void) | undefined;
   /**
    * Обработчик свайпа назад.
    */
-  onSwipeBack?: () => void;
+  onSwipeBack?: (() => void) | undefined;
   /**
    * Обработчик начала анимации свайпа назад.
    */
-  onSwipeBackStart?: (activePanel: string | null) => void | 'prevent';
+  onSwipeBackStart?: ((activePanel: string | null) => void | 'prevent') | undefined;
   /**
    * Обработчик завершения анимации отмененного пользователем свайпа.
    */
-  onSwipeBackCancel?: () => void;
+  onSwipeBackCancel?: (() => void) | undefined;
   /**
    * Массив из id панелей в порядке открытия.
    */
-  history?: string[];
+  history?: string[] | undefined;
   /**
    * Функция проверки перехода назад.
    */
-  isBackCheck?: (params: TransitionParams) => boolean;
+  isBackCheck?: ((params: TransitionParams) => boolean) | undefined;
   /**
    * @ignore
    */
-  splitCol?: SplitColContextProps;
+  splitCol?: SplitColContextProps | undefined;
   /**
    * @ignore
    */
-  configProvider?: ConfigProviderContextInterface;
+  configProvider?: ConfigProviderContextInterface | undefined;
   /**
    * @ignore
    */
-  scroll?: ScrollContextInterface;
+  scroll?: ScrollContextInterface | undefined;
 }
 
 /* eslint-disable jsdoc/require-jsdoc */
@@ -88,11 +88,11 @@ export interface ViewInfiniteState {
 
   visiblePanels: Array<string | null>;
   activePanel: string | null;
-  isBack?: boolean;
+  isBack?: boolean | undefined;
   prevPanel: string | null;
   nextPanel: string | null;
 
-  swipingBack?: boolean;
+  swipingBack?: boolean | undefined;
   swipeBackStartX: number;
   swipeBackShift: number;
   swipeBackNextPanel: string | null;

package/src/components/WriteBar/WriteBar.tsx

@@ -45,44 +45,50 @@ export interface WriteBarProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ textArea: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLTextAreaElement>;
+  getRef?: React.Ref<HTMLTextAreaElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `textArea`: свойства для прокидывания в поле ввода.
    */
-  slotProps?: {
-    root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
-      HasRootRef<HTMLDivElement> &
-      HasDataAttribute;
-    textArea?: React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-      HasRootRef<HTMLTextAreaElement> &
-      HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+              HasRootRef<HTMLDivElement> &
+              HasDataAttribute)
+          | undefined;
+        textArea?:
+          | (React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+              HasRootRef<HTMLTextAreaElement> &
+              HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * Содержимое, отображаемое слева от поля ввода.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Содержимое, отображаемое поверх поля ввода (актуально для iOS).
    */
-  inlineAfter?: React.ReactNode;
+  inlineAfter?: React.ReactNode | undefined;
   /**
    * Содержимое, отображаемое справа от поля ввода.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Вызывается при смене высоты поля ввода.
    */
-  onHeightChange?: VoidFunction;
+  onHeightChange?: VoidFunction | undefined;
   /**
    * Добавляет тень вокруг поля ввода.
    */
-  shadow?: boolean;
+  shadow?: boolean | undefined;
   /**
    * @deprecated Неиспользуемое свойство.
    */
-  children?: never;
+  children?: never | undefined;
 }
 
 const WriteBarTypography = (props: TypographyProps) => {

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -38,15 +38,15 @@ export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButton
    * - `send` – иконка отправки, текст по умолчанию — "Отправить";
    * - `done` – иконка отправки в режиме редактирования, текст по умолчанию — "Готово".
    */
-  mode?: 'attach' | 'send' | 'done';
+  mode?: 'attach' | 'send' | 'done' | undefined;
   /**
    * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.
    */
-  count?: number;
+  count?: number | undefined;
   /**
    * Текст кнопки. Необходим для ассистивных технологий.
    */
-  label?: string;
+  label?: string | undefined;
 }
 
 const warn = warnOnce('WriteBarIcon');

package/src/helpers/math.ts

@@ -40,7 +40,7 @@ export function rescale(
   value: number,
   from: [number, number],
   to: [number, number],
-  options: { step?: number } = {},
+  options: { step?: number | undefined } = {},
 ): number {
   const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
   return decimatedClamp(scaled, to[0], to[1], options.step);

package/src/hooks/useAdaptivityWithJSMediaQueries.ts

@@ -53,7 +53,9 @@ export const isSizeXRegularFallback = (
     ? viewWidth >= ViewWidth.SMALL_TABLET
     : legacySizeX === 'regular';
 
-export interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {
+type RequiredNonNullable<T> = { [P in keyof T]-?: NonNullable<T[P]> };
+
+export interface UseAdaptivityWithJSMediaQueries extends RequiredNonNullable<BaseAdaptivityProps> {
   isDesktop: boolean;
 }
 

package/src/hooks/useAutoDetectColorScheme.ts

@@ -1,39 +1,17 @@
-import * as React from 'react';
-import { noop } from '@vkontakte/vkjs';
 import { ColorScheme, type ColorSchemeType } from '../lib/colorScheme';
-import { useDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useMediaQueryMatches } from './useMediaQueryMatch';
 
 /**
  * @private
  */
 export const useAutoDetectColorScheme = (colorSchemeProp?: ColorSchemeType): ColorSchemeType => {
-  const { window } = useDOM();
+  const isDark = useMediaQueryMatches('(prefers-color-scheme: dark)', {
+    disable: colorSchemeProp !== undefined,
+  });
 
-  const [colorScheme, setColorScheme] = React.useState<ColorSchemeType>(
-    colorSchemeProp || ColorScheme.LIGHT,
-  );
+  if (colorSchemeProp) {
+    return colorSchemeProp;
+  }
 
-  useIsomorphicLayoutEffect(() => {
-    if (colorSchemeProp) {
-      setColorScheme(colorSchemeProp);
-      return noop;
-    }
-
-    const mediaQuery = window ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
-
-    if (!mediaQuery) {
-      return noop;
-    }
-
-    const check = (event: MediaQueryList | MediaQueryListEvent) => {
-      // eslint-disable-next-line no-restricted-properties
-      setColorScheme(event.matches ? ColorScheme.DARK : ColorScheme.LIGHT);
-    };
-    check(mediaQuery);
-    mediaQuery.addEventListener('change', check);
-    return () => mediaQuery.removeEventListener('change', check);
-  }, [window, colorSchemeProp]);
-
-  return colorScheme;
+  return isDark ? ColorScheme.DARK : ColorScheme.LIGHT;
 };

package/src/hooks/useCalendar.ts

@@ -16,7 +16,7 @@ export interface UseCalendarDependencies
     | 'disableFuture'
     | 'disablePast'
   > {
-  value?: Array<Date | null> | Date | null;
+  value?: Array<Date | null> | Date | null | undefined;
 }
 
 export function useCalendar({
@@ -71,7 +71,7 @@ export function useCalendar({
   );
 
   const isDayDisabled = React.useCallback(
-    (day: Date, withTime?: boolean) => {
+    (day: Date, withTime?: boolean): boolean => {
       const now = new Date();
       if (shouldDisableDate) {
         return shouldDisableDate(day);

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);