@vkontakte/vkui 8.0.2 → 8.1.1

package/src/components/ModalPage/types.ts

@@ -12,7 +12,7 @@ type OmittedStyleAttribute = {
   /**
    * Дополнительные стили.
    */
-  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;
+  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'> | undefined;
 };
 
 export interface ModalPageProps
@@ -24,21 +24,21 @@ export interface ModalPageProps
    *
    * @default false
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Сохранять ли компонент в DOM при `open={false}`.
    *
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * Шапка модальной страницы, `<ModalPageHeader />`.
    */
-  header?: ReactNode;
+  header?: ReactNode | undefined;
   /**
    * Подвал модальной страницы, `<ModalPageFooter />`.
    */
-  footer?: ReactNode;
+  footer?: ReactNode | undefined;
   /**
    * Задаёт контенту максимальную ширину на десктопе.
    */
@@ -51,7 +51,7 @@ export interface ModalPageProps
    * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
    * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
    */
-  height?: string | number;
+  height?: string | number | undefined;
   /**
    * Процент, на который изначально будет открыта модальная страница.
    *
@@ -60,95 +60,95 @@ export interface ModalPageProps
    *
    * Игнорируется при включении `dynamicContentHeight`.
    */
-  settlingHeight?: number;
+  settlingHeight?: number | undefined;
   /**
    * Если высота контента в модальной странице может поменяться, нужно установить это свойство.
    */
-  dynamicContentHeight?: boolean;
+  dynamicContentHeight?: boolean | undefined;
   /**
    * Отключает фокус на интерактивный элемент после открытия модалки.
    *
    * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.
    */
-  noFocusToDialog?: boolean;
+  noFocusToDialog?: boolean | undefined;
   /**
    * Скрывает кнопку закрытия (актуально для iOS, так как можно отрисовать кнопку закрытия внутри модалки).
    */
-  hideCloseButton?: boolean;
+  hideCloseButton?: boolean | undefined;
   /**
    * `data-testid` для содержимого модального окна.
    */
-  modalContentTestId?: string;
+  modalContentTestId?: string | undefined;
   /**
    * Возвращает DOM-элемент содержимого модального окна.
    */
-  getModalContentRef?: Ref<HTMLDivElement>;
+  getModalContentRef?: Ref<HTMLDivElement> | undefined;
   /**
    * `data-testid` для оверлея.
    */
-  modalOverlayTestId?: string;
+  modalOverlayTestId?: string | undefined;
   /**
    * `data-testid` для кнопки закрытия.
    */
-  modalDismissButtonTestId?: string;
+  modalDismissButtonTestId?: string | undefined;
   /**
    * Текст для скринридера.
    */
-  modalDismissButtonLabel?: string;
+  modalDismissButtonLabel?: string | undefined;
   /**
    * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, нажатие на подложку).
    *
    * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте.
    */
-  preventClose?: boolean;
+  preventClose?: boolean | undefined;
   /**
    * Отключает раскрытие и закрытие панели в мобильном виде.
    */
-  disableContentPanningGesture?: boolean;
+  disableContentPanningGesture?: boolean | undefined;
   /**
    * Будет вызвано при начале открытия модалки.
    */
-  onOpen?: VoidFunction;
+  onOpen?: VoidFunction | undefined;
   /**
    * Будет вызвано при окончательном открытии модалки.
    */
-  onOpened?: VoidFunction;
+  onOpened?: VoidFunction | undefined;
   /**
    * Будет вызвано при начале закрытия модалки.
    */
-  onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;
+  onClose?: ((reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void) | undefined;
   /**
    * Будет вызвано при окончательном закрытии модалки.
    */
-  onClosed?: VoidFunction;
+  onClosed?: VoidFunction | undefined;
   /**
    * Управляющие элементы под кнопкой закрытия.
    *
    * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton.
    *
    */
-  outsideButtons?: React.ReactNode;
+  outsideButtons?: React.ReactNode | undefined;
   /**
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
   /**
    * Позволяет отключить захват фокуса.
    *
    * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.
    */
-  disableFocusTrap?: boolean;
+  disableFocusTrap?: boolean | undefined;
   /**
    * Отключает отображение и взаимодействие с фоном модалки.
    */
-  disableModalOverlay?: boolean;
+  disableModalOverlay?: boolean | undefined;
   /**
    * Отключает анимацию открытия модалки.
    */
-  disableOpenAnimation?: boolean;
+  disableOpenAnimation?: boolean | undefined;
   /**
    * Отключает анимацию закрытия модалки.
    */
-  disableCloseAnimation?: boolean;
+  disableCloseAnimation?: boolean | undefined;
 }

package/src/components/ModalPageFooter/ModalPageFooter.tsx

@@ -15,11 +15,11 @@ export interface ModalPageFooterProps extends HTMLAttributesWithRootRef<HTMLDivE
   /**
    * Отключение отображения разделителя.
    */
-  noSeparator?: boolean;
+  noSeparator?: boolean | undefined;
   /**
    * Отключение отступов сверху и снизу.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
 }
 
 export const ModalPageFooter = ({

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -22,7 +22,7 @@ export interface ModalPageHeaderProps
   /**
    * Отключение разделителя.
    */
-  noSeparator?: boolean;
+  noSeparator?: boolean | undefined;
 }
 
 /**

package/src/components/ModalRoot/types.ts

@@ -10,60 +10,60 @@ type ModalRootBaseProps = {
   /**
    * Открывает модальное окно с переданным id.
    */
-  activeModal?: ModalRootActiveModal;
+  activeModal?: ModalRootActiveModal | undefined;
 
   /**
    * `data-testid` для маски.
    */
-  modalOverlayTestId?: string;
+  modalOverlayTestId?: string | undefined;
 
   /**
    * Отключает фокус на контейнер диалогового окна при открытии.
    *
    * > Важно установить фокус после открытия в любое место модалки используя событие `onOpened`, иначе не будет работать закрытие по нажатию `Esc`.
    */
-  noFocusToDialog?: boolean;
+  noFocusToDialog?: boolean | undefined;
 
-  usePortal?: AppRootPortalProps['usePortal'];
+  usePortal?: AppRootPortalProps['usePortal'] | undefined;
   /**
    * Будет вызвано при начале открытия активной модалки с её id.
    */
-  onOpen?: ModalRootCallbackFunction;
+  onOpen?: ModalRootCallbackFunction | undefined;
 
   /**
    * Будет вызвано при окончательном открытии активной модалки с её id.
    */
-  onOpened?: ModalRootCallbackFunction;
+  onOpened?: ModalRootCallbackFunction | undefined;
 
   /**
    * Будет вызвано при начале закрытия активной модалки с её id.
    */
-  onClose?: ModalRootCallbackFunction;
+  onClose?: ModalRootCallbackFunction | undefined;
 
   /**
    * Будет вызвано при окончательном закрытии активной модалки с её id.
    */
-  onClosed?: ModalRootCallbackFunction;
+  onClosed?: ModalRootCallbackFunction | undefined;
 
   /**
    * Отключает отображение и взаимодействие с фоном модалки.
    */
-  disableModalOverlay?: boolean;
+  disableModalOverlay?: boolean | undefined;
 
   /**
    * Отключает анимацию появления .
    */
-  disableOpenAnimation?: boolean;
+  disableOpenAnimation?: boolean | undefined;
   /**
    * Отключает анимацию закрытия модалки.
    */
-  disableCloseAnimation?: boolean;
+  disableCloseAnimation?: boolean | undefined;
 };
 
 export interface ModalRootProps extends ModalRootBaseProps {
   children: React.ReactElement | Iterable<React.ReactElement>;
-  onOverlayClosed?: () => void;
-  onOverlayShowed?: () => void;
+  onOverlayClosed?: (() => void) | undefined;
+  onOverlayShowed?: (() => void) | undefined;
 }
 
 type ModalRootContextBaseInterface = {
@@ -78,6 +78,6 @@ export interface ModalRootContextInterface
     ModalRootBaseProps {}
 
 export interface UseModalRootContext extends ModalRootContextBaseInterface {
-  activeModal?: string | null;
-  onClose?: VoidFunction;
+  activeModal?: string | null | undefined;
+  onClose?: VoidFunction | undefined;
 }

package/src/components/ModalRoot/useModalRootManager.tsx

@@ -12,33 +12,33 @@ import type { ModalRootCallbackFunction } from './types';
 
 const warn = warnOnce('useModalManager');
 export interface UseModalRootManager {
-  id?: string;
+  id?: string | undefined;
   open: boolean;
   keepMounted: boolean;
-  modalOverlayTestId?: string;
-  noFocusToDialog?: boolean;
-  disableModalOverlay?: boolean;
-  disableCloseAnimation?: boolean;
-  disableOpenAnimation?: boolean;
-  onOpen?: AnyFunction;
-  onOpened?: AnyFunction;
-  onClose?: AnyFunction;
-  onClosed?: AnyFunction;
+  modalOverlayTestId?: string | undefined;
+  noFocusToDialog?: boolean | undefined;
+  disableModalOverlay?: boolean | undefined;
+  disableCloseAnimation?: boolean | undefined;
+  disableOpenAnimation?: boolean | undefined;
+  onOpen?: AnyFunction | undefined;
+  onOpened?: AnyFunction | undefined;
+  onClose?: AnyFunction | undefined;
+  onClosed?: AnyFunction | undefined;
 }
 
 export interface UseModalRootManagerResolvedProps {
   id: string;
   open: boolean;
-  noFocusToDialog?: boolean;
-  disableModalOverlay?: boolean;
-  disableCloseAnimation?: boolean;
-  disableOpenAnimation?: boolean;
-  modalOverlayTestId?: string;
+  noFocusToDialog?: boolean | undefined;
+  disableModalOverlay?: boolean | undefined;
+  disableCloseAnimation?: boolean | undefined;
+  disableOpenAnimation?: boolean | undefined;
+  modalOverlayTestId?: string | undefined;
   ModalOverlay: React.ComponentType<ModalOverlayProps>;
-  onOpen?: AnyFunction;
-  onOpened?: AnyFunction;
-  onClose?: AnyFunction;
-  onClosed?: AnyFunction;
+  onOpen?: AnyFunction | undefined;
+  onOpened?: AnyFunction | undefined;
+  onClose?: AnyFunction | undefined;
+  onClosed?: AnyFunction | undefined;
 }
 
 export type UseModalRootManagerResult =

package/src/components/NativeSelect/NativeSelect.tsx

@@ -68,16 +68,22 @@ export interface NativeSelectProps
    * - `root`: свойства для прокидывания в корень компонента;
    * - `select`: свойства для прокидывания в нативный `select`.
    */
-  slotProps?: {
-    root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
-      HasDataAttribute &
-      HasRootRef<HTMLDivElement>;
-    select?: NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+              HasDataAttribute &
+              HasRootRef<HTMLDivElement>)
+          | undefined;
+        select?:
+          | (NativeHTMLSelectProps & HasRootRef<HTMLSelectElement> & HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLSelectElement>;
+  getRef?: React.Ref<HTMLSelectElement> | undefined;
   /**
    * Выбранное значение.
    *
@@ -85,34 +91,34 @@ export interface NativeSelectProps
    * >
    * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`.
    */
-  value?: SelectValue;
+  value?: SelectValue | undefined;
   /**
    * См. `value`.
    */
-  defaultValue?: SelectValue;
+  defaultValue?: SelectValue | undefined;
   /**
    * Обработчик, срабатывающий при изменении выбранного значения.
    * Вторым параметром прокидывается новое значение.
    *
    * > ⚠️ Лучше использовать второй параметр при работе с компонентом.
    */
-  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;
+  onChange?: ((e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void) | undefined;
   /**
    * Текст-подсказка при отсутствии выбранного значения.
    */
-  placeholder?: string;
+  placeholder?: string | undefined;
   /**
    * Флаг для включения многострочного режима.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
   /**
    * Тип селекта, влияющий на отображение.
    */
-  selectType?: SelectType;
+  selectType?: SelectType | undefined;
   /**
    * Иконка раскрывающегося списка.
    */
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | undefined;
 }
 
 /**

package/src/components/NumberInputLike/NumberInputLike.tsx

@@ -4,9 +4,9 @@ import { InputLike, type InputLikeProps } from '../InputLike/InputLike';
 /* eslint-disable jsdoc/require-jsdoc */
 
 export interface NumberInputLikeProps extends Omit<InputLikeProps, 'value'> {
-  value?: number | string;
-  maxValue?: number;
-  minValue?: number;
+  value?: number | string | undefined;
+  maxValue?: number | undefined;
+  minValue?: number | undefined;
 }
 
 const stringifyValue = (

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -55,11 +55,11 @@ type AllowedFloatingArrowProps = {
   /**
    * Сдвиг стрелки относительно текущих координат.
    */
-  arrowOffset?: FloatingArrowProps['offset'];
+  arrowOffset?: FloatingArrowProps['offset'] | undefined;
   /**
    * Включает абсолютное смещение по `arrowOffset`.
    */
-  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];
+  isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'] | undefined;
 };
 
 export interface OnboardingTooltipProps
@@ -70,19 +70,19 @@ export interface OnboardingTooltipProps
    * Управление поведением возврата фокуса при закрытии всплывающего окна.
    * @default true
    */
-  restoreFocus?: boolean | (() => boolean | HTMLElement);
+  restoreFocus?: boolean | (() => boolean | HTMLElement) | undefined;
   /**
    * Скрывает стрелку, указывающую на якорный элемент.
    */
-  disableArrow?: boolean;
+  disableArrow?: boolean | undefined;
   /**
    * Обработчик, который вызывается при нажатии по любому месту в пределах экрана.
    */
-  onClose?: (this: void) => void;
+  onClose?: ((this: void) => void) | undefined;
   /**
    * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.
    */
-  overlayLabel?: string;
+  overlayLabel?: string | undefined;
 }
 
 /**
@@ -143,14 +143,18 @@ export const OnboardingTooltip = ({
   const {
     x: floatingDataX,
     y: floatingDataY,
+    isPositioned,
     refs,
     placement: resolvedPlacement,
     middlewareData: { arrow: arrowCoords },
   } = useFloating({
     strategy: positionStrategy,
-    placement: strictPlacement,
+    ...(strictPlacement !== undefined && { placement: strictPlacement }),
     middleware: middlewares,
-    whileElementsMounted: isLock ? undefined : autoUpdateFloatingElement,
+    ...(!isLock && {
+      whileElementsMounted: (...args) =>
+        autoUpdateFloatingElement(...args, { elementResize: true }),
+    }),
   });
 
   const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
@@ -178,6 +182,10 @@ export const OnboardingTooltip = ({
       y: floatingDataY,
     });
 
+    if (!isPositioned) {
+      floatingStyle.visibility = 'hidden';
+    }
+
     tooltip = createPortal(
       <FocusTrap rootRef={focusTrapRootRef} disabled={disableFocusTrap} restoreFocus={restoreFocus}>
         <RootComponent

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -10,7 +10,7 @@ type OnboardingTooltipContainerProps = React.HTMLAttributes<HTMLDivElement> &
     /**
      * Фиксированное отображение тултипа.
      */
-    fixed?: boolean;
+    fixed?: boolean | undefined;
   };
 
 export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<

package/src/components/Pagination/Pagination.tsx

@@ -24,35 +24,35 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
   /**
    * Текущая страница.
    */
-  currentPage?: number;
+  currentPage?: number | undefined;
   /**
    * Кол-во всегда видимых страниц по краям текущей страницы.
    */
-  siblingCount?: number;
+  siblingCount?: number | undefined;
   /**
    * Кол-во всегда видимых страниц в начале и в конце.
    */
-  boundaryCount?: number;
+  boundaryCount?: number | undefined;
   /**
    * Общее кол-во страниц.
    */
-  totalPages?: number;
+  totalPages?: number | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Декоративный текст для кнопки навигации назад.
    *
    * > Note: Экранные дикторы будут использовать `prevButtonLabel`.
    */
-  prevButtonCaption?: string;
+  prevButtonCaption?: string | undefined;
   /**
    * Декоративный текст для кнопки навигации вперёд.
    *
    * > Note: Экранные дикторы будут использовать `nextButtonLabel`.
    */
-  nextButtonCaption?: string;
+  nextButtonCaption?: string | undefined;
   /**
    * Задаёт стиль отображения кнопок навигации.
    *
@@ -60,23 +60,23 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
    * - `caption` – показывать только подпись;
    * - `both` – показывать и иконку, и подпись.
    */
-  navigationButtonsStyle?: PaginationNavigationButtonProps['style'];
+  navigationButtonsStyle?: PaginationNavigationButtonProps['style'] | undefined;
   /**
    * [a11y] Метка для обозначения блока навигации.
    */
-  navigationLabel?: string;
+  navigationLabel?: string | undefined;
   /**
    * Тип элемента отрисовки блока навигации.
    */
-  navigationLabelComponent?: HasComponent['Component'];
+  navigationLabelComponent?: HasComponent['Component'] | undefined;
   /**
    * [a11y] Метка для кнопки навигации назад.
    */
-  prevButtonLabel?: string;
+  prevButtonLabel?: string | undefined;
   /**
    * [a11y] Метка для кнопки навигации вперёд.
    */
-  nextButtonLabel?: string;
+  nextButtonLabel?: string | undefined;
   /**
    * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.
    *
@@ -86,35 +86,37 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
    * Дополнительная информация скорее будет избыточна,
    * так как будет зачитываться для каждой кнопки при перемещении по списку.
    */
-  getPageLabel?: (isCurrent: boolean) => string;
+  getPageLabel?: ((isCurrent: boolean) => string) | undefined;
   /**
    * Обработчик изменения выбранной страницы.
    */
-  onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;
+  onChange?: ((page: number, event: React.MouseEvent<HTMLElement>) => void) | undefined;
   /**
    * Функция для кастомного рендера кнопок страниц.
    *
    * > Note: `CustomPaginationPageButtonProps` наследует API [Tappable](https://vkui.io/components/tappable).
    */
-  renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;
+  renderPageButton?: ((props: CustomPaginationPageButtonProps) => React.ReactNode) | undefined;
   /**
    Функция для кастомного рендера кнопок навигации `prev` и `next`.
    *
    * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkui.io/components/button).
    */
-  renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;
+  renderNavigationButton?:
+    | ((props: CustomPaginationNavigationButton) => React.ReactNode)
+    | undefined;
   /**
    * Передает атрибут `data-testid` для кнопок страниц.
    */
-  pageButtonTestId?: (day: PaginationPageType, active: boolean) => string;
+  pageButtonTestId?: ((day: PaginationPageType | undefined, active: boolean) => string) | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки `prev`.
    */
-  prevButtonTestId?: string;
+  prevButtonTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки `next`.
    */
-  nextButtonTestId?: string;
+  nextButtonTestId?: string | undefined;
 }
 
 /**
@@ -238,11 +240,11 @@ export const Pagination = ({
             caption={prevButtonCaption}
             Icon={isRtl ? Icon24ChevronCompactRight : Icon24ChevronCompactLeft}
             a11yLabel={prevButtonLabel}
-            disabled={isFirstPage || disabled}
+            disabled={isFirstPage || disabled === true}
             onClick={handlePrevClick}
             data-page={prevPage}
-            data-testid={prevButtonTestId}
-            renderNavigationButton={renderNavigationButton}
+            {...(prevButtonTestId !== undefined && { 'data-testid': prevButtonTestId })}
+            {...(renderNavigationButton !== undefined && { renderNavigationButton })}
           />
         </li>
         {pages.map(renderPages)}
@@ -253,11 +255,11 @@ export const Pagination = ({
             caption={nextButtonCaption}
             Icon={isRtl ? Icon24ChevronCompactLeft : Icon24ChevronCompactRight}
             a11yLabel={nextButtonLabel}
-            disabled={isLastPage || disabled}
+            disabled={isLastPage || disabled === true}
             onClick={handleNextClick}
             data-page={nextPage}
-            data-testid={nextButtonTestId}
-            renderNavigationButton={renderNavigationButton}
+            {...(nextButtonTestId !== undefined && { 'data-testid': nextButtonTestId })}
+            {...(renderNavigationButton !== undefined && { renderNavigationButton })}
           />
         </li>
       </ul>

package/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx

@@ -10,14 +10,16 @@ export interface PaginationNavigationButtonOpts {
   'caption': React.ReactNode;
   'Icon': React.ComponentType;
   'a11yLabel': React.ReactNode;
-  'disabled'?: boolean;
+  'disabled'?: boolean | undefined;
   'onClick': (event: React.MouseEvent<HTMLElement>) => void;
   'data-page': number | undefined;
-  'data-testid': string | undefined;
+  'data-testid'?: string | undefined;
 }
 
 export interface PaginationNavigationButtonProps extends PaginationNavigationButtonOpts {
-  renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;
+  renderNavigationButton?:
+    | ((props: CustomPaginationNavigationButton) => React.ReactNode)
+    | undefined;
 }
 
 /**