@vkontakte/vkui 7.1.2 → 7.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/Alert/Alert.tsx

@@ -193,6 +193,11 @@ export const Alert = ({
               </IconButton>
             )}
           </div>
+          {isDismissButtonVisible && dismissButtonMode === 'outside' && (
+            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
+              {dismissLabel}
+            </ModalDismissButton>
+          )}
           <AlertActions
             actions={actions}
             actionsAlign={actionsAlign}
@@ -200,11 +205,6 @@ export const Alert = ({
             renderAction={renderAction}
             onItemClick={onItemClick}
           />
-          {isDismissButtonVisible && dismissButtonMode === 'outside' && (
-            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
-              {dismissLabel}
-            </ModalDismissButton>
-          )}
         </FocusTrap>
       </PopoutWrapper>
     </AppRootPortal>

package/src/components/CarouselBase/CarouselBase.tsx

@@ -335,12 +335,7 @@ export const CarouselBase = ({
 
   const simpleSlideChangePerform = () => {
     const { snaps } = slidesManager.current;
-    const startPoint = shiftXCurrentRef.current;
-    const endPoint = snaps[slideIndex];
-    const distance = endPoint - startPoint;
-    addToAnimationQueue(
-      getAnimateFunction((progress) => transformCssStyles(startPoint + distance * progress)),
-    );
+    requestTransform(snaps[slideIndex], true);
   };
 
   useIsomorphicLayoutEffect(

package/src/components/FormItem/FormItem.tsx

@@ -145,6 +145,7 @@ export const FormItem: React.FC<FormItemProps> & {
             }}
             removePlaceholder={removePlaceholder}
             indent={removable === 'indent'}
+            noPadding={noPadding}
           >
             <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>
               {wrappedChildren}

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -12,6 +12,7 @@
 }
 
 .body {
+  box-sizing: content-box;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -178,7 +178,6 @@ export const HorizontalScroll = ({
   scrollOnAnyWheel = false,
   prevButtonTestId,
   nextButtonTestId,
-  getRootRef,
   ...restProps
 }: HorizontalScrollProps): React.ReactNode => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
@@ -192,8 +191,6 @@ export const HorizontalScroll = ({
 
   const scrollerRef = useExternRef(getRef, directionRef);
 
-  const rootRef = useExternRef(getRootRef);
-
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
   const hasPointer = useAdaptivityHasPointer();
@@ -250,31 +247,40 @@ export const HorizontalScroll = ({
 
   useIsomorphicLayoutEffect(
     function addWheelEventHandler() {
-      if (!rootRef.current) {
+      const scrollEl = scrollerRef.current;
+      if (!scrollEl) {
         return noop;
       }
       /**
        * Прокрутка с помощью любого колеса мыши
        */
       const onWheel = (e: WheelEvent) => {
-        const left = e.deltaX + (scrollOnAnyWheel ? e.deltaY : 0);
-        scrollerRef.current!.scrollBy({ left, behavior: 'auto' });
-        if (e.deltaY && scrollOnAnyWheel) {
-          e.preventDefault();
-        }
+        scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
+        e.preventDefault();
       };
+
       const listenerOptions = { passive: false };
-      rootRef.current?.addEventListener('wheel', onWheel, listenerOptions);
-      // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства
-      return () => rootRef.current?.removeEventListener('wheel', onWheel, listenerOptions);
+
+      if (scrollOnAnyWheel) {
+        scrollEl.addEventListener('wheel', onWheel, listenerOptions);
+      }
+      scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);
+
+      return () => {
+        if (scrollOnAnyWheel) {
+          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства
+          scrollEl.removeEventListener('wheel', onWheel, listenerOptions);
+        }
+        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства
+        scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);
+      };
     },
-    [rootRef, scrollOnAnyWheel, scrollerRef],
+    [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],
   );
 
   return (
     <RootComponent
       {...restProps}
-      getRootRef={rootRef}
       baseClassName={classNames(
         styles.host,
         'vkuiInternalHorizontalScroll',
@@ -306,7 +312,7 @@ export const HorizontalScroll = ({
           onClick={scrollToRight}
         />
       )}
-      <div className={styles.in} ref={scrollerRef} onScroll={calculateArrowsVisibility}>
+      <div className={styles.in} ref={scrollerRef}>
         <div className={styles.inWrapper}>{children}</div>
       </div>
     </RootComponent>

package/src/components/IconButton/IconButton.module.css

@@ -18,6 +18,11 @@
   border-radius: 9999px;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.host :global(.vkuiIcon) {
+  box-sizing: content-box;
+}
+
 .sizeYCompact {
   block-size: 44px;
 }

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -70,6 +70,7 @@ export const ModalCardInternal = ({
   onOpened,
   onClose = noop,
   onClosed,
+  disableFocusTrap,
   ...restProps
 }: ModalCardInternalProps): ReactNode => {
   const platform = usePlatform();
@@ -136,7 +137,10 @@ export const ModalCardInternal = ({
   );
 
   useScrollLock(!hidden);
-  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });
+  useFocusTrap(ref, {
+    autoFocus: !noFocusToDialog,
+    disabled: !opened || hidden || disableFocusTrap,
+  });
 
   return (
     <ModalOutlet hidden={hidden} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>

package/src/components/ModalCard/types.ts

@@ -1,4 +1,5 @@
 import type { UIEvent } from 'react';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import type { NavIdProps } from '../../lib/getNavId';
 import type { UseBottomSheetHandlers } from '../../lib/sheet';
 import type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
@@ -48,4 +49,10 @@ export interface ModalCardProps
    * Будет вызвано при окончательном закрытии модалки.
    */
   onClosed?: VoidFunction;
+  /**
+   * Позволяет отключить захват фокуса.
+   *
+   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали
+   */
+  disableFocusTrap?: UseFocusTrapProps['disabled'];
 }

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -75,6 +75,7 @@ export const ModalPageInternal = ({
   onOpened,
   onClose = noop,
   onClosed,
+  disableFocusTrap,
   ...restProps
 }: ModalPageInternalProps) => {
   const { hasCustomPanelHeaderAfter } = useConfigProvider();
@@ -171,7 +172,7 @@ export const ModalPageInternal = ({
         autoFocus={!noFocusToDialog}
         role="dialog"
         aria-modal="true"
-        disabled={!opened || hidden}
+        disabled={!opened || hidden || disableFocusTrap}
         className={classNames(
           className,
           styles.host,

package/src/components/ModalPage/types.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import type { NavIdProps } from '../../lib/getNavId';
 import type { HTMLAttributesWithRootRef } from '../../types';
 
@@ -109,4 +110,10 @@ export interface ModalPageProps
    * Будет вызвано при окончательном закрытии модалки.
    */
   onClosed?: VoidFunction;
+  /**
+   * Позволяет отключить захват фокуса.
+   *
+   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали
+   */
+  disableFocusTrap?: UseFocusTrapProps['disabled'];
 }

package/src/components/OnboardingTooltip/OnboardingTooltip.module.css

@@ -4,4 +4,17 @@
   inset-block-start: 0;
   inline-size: 100%;
   block-size: 100%;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  cursor: default;
+  background: transparent;
+  border: 0;
+}
+
+.overlay:focus,
+.overlay:focus-visible {
+  outline: none;
 }

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { hasReactNode } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
 import { createPortal } from '../../lib/createPortal';
 import {
@@ -18,6 +19,7 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
 import type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';
@@ -58,7 +60,8 @@ type AllowedFloatingArrowProps = {
 export interface OnboardingTooltipProps
   extends AllowedFloatingComponentProps,
     AllowedTooltipBaseProps,
-    AllowedFloatingArrowProps {
+    AllowedFloatingArrowProps,
+    Pick<UseFocusTrapProps, 'restoreFocus'> {
   /**
    * Скрывает стрелку, указывающую на якорный элемент.
    */
@@ -67,15 +70,19 @@ export interface OnboardingTooltipProps
    * Callback, который вызывается при клике по любому месту в пределах экрана.
    */
   onClose?: (this: void) => void;
+  /**
+   * [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при клике.
+   */
+  overlayLabel?: string;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
 export const OnboardingTooltip = ({
-  id: idProp,
+  'id': idProp,
   children,
-  shown: shownProp = true,
+  'shown': shownProp = true,
   arrowPadding = DEFAULT_ARROW_PADDING,
   arrowHeight = DEFAULT_ARROW_HEIGHT,
   offsetByMainAxis = 0,
@@ -83,13 +90,18 @@ export const OnboardingTooltip = ({
   arrowOffset = 0,
   isStaticArrowOffset = false,
   onClose,
-  placement: placementProp = 'bottom-start',
+  'placement': placementProp = 'bottom-start',
   maxWidth = TOOLTIP_MAX_WIDTH,
-  style: styleProp,
+  'style': styleProp,
   getRootRef,
   disableArrow = false,
   onPlacementChange,
   disableFlipMiddleware = false,
+  overlayLabel = 'Закрыть',
+  title,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  restoreFocus,
   ...restProps
 }: OnboardingTooltipProps): React.ReactNode => {
   const generatedId = React.useId();
@@ -130,6 +142,13 @@ export const OnboardingTooltip = ({
 
   usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);
 
+  const titleId = React.useId();
+  if (process.env.NODE_ENV === 'development' && !title && !ariaLabel && !ariaLabelledBy) {
+    warn(
+      'Если "title" не используется, то необходимо задать либо "aria-label", либо "aria-labelledby" (см. правило axe aria-dialog-name)',
+    );
+  }
+
   let tooltip: React.ReactPortal | null = null;
   if (shown) {
     const floatingStyle = convertFloatingDataToReactCSSProperties(
@@ -139,10 +158,20 @@ export const OnboardingTooltip = ({
     );
 
     tooltip = createPortal(
-      <>
+      <FocusTrap
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}
+        onClose={onClose}
+        restoreFocus={restoreFocus}
+      >
+        <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />
         <TooltipBase
           {...restProps}
           id={tooltipId}
+          title={title}
+          titleId={title ? titleId : undefined}
           getRootRef={tooltipRef}
           style={mergeStyle(floatingStyle, styleProp)}
           maxWidth={maxWidth}
@@ -158,8 +187,7 @@ export const OnboardingTooltip = ({
                 }
           }
         />
-        <div className={styles.overlay} onClickCapture={onClose} />
-      </>,
+      </FocusTrap>,
       tooltipContainer,
     );
   }

package/src/components/Pagination/Pagination.tsx

@@ -17,7 +17,6 @@ import {
   PaginationPageButton,
 } from './PaginationPage/PaginationPageButton';
 import { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';
-import { getPageLabelDefault } from './utils';
 import styles from './Pagination.module.css';
 
 export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {
@@ -76,6 +75,12 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
   nextButtonLabel?: string;
   /**
    * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.
+   *
+   * > Note: По возможности лучше не использовать,
+   * так как компонент и так проставляет номер страницы в разметку,
+   * что достаточно для пользователей скринридеров.
+   * Дополнительная информация скорее будет избыточна,
+   * так как будет зачитываться для каждой кнопки при перемещении по списку.
    */
   getPageLabel?: (isCurrent: boolean) => string;
   onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;
@@ -117,8 +122,8 @@ export const Pagination = ({
   prevButtonCaption = 'Назад',
   nextButtonCaption = 'Вперёд',
   navigationButtonsStyle = 'icon',
-  getPageLabel = getPageLabelDefault,
-  navigationLabel = 'Навигация по страницам',
+  getPageLabel,
+  navigationLabel = 'Страницы',
   navigationLabelComponent = 'h2',
   prevButtonLabel = 'Перейти на предыдущую страницу',
   nextButtonLabel = 'Перейти на следующую страницу',
@@ -204,9 +209,18 @@ export const Pagination = ({
     [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY, pageButtonTestId],
   );
 
+  const navigationLabelId = React.useId();
+
   return (
-    <RootComponent Component="nav" role="navigation" {...resetProps}>
-      <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>
+    <RootComponent
+      Component="nav"
+      role="navigation"
+      aria-labelledby={navigationLabelId}
+      {...resetProps}
+    >
+      <VisuallyHidden id={navigationLabelId} Component={navigationLabelComponent}>
+        {navigationLabel}
+      </VisuallyHidden>
       <ul className={styles.list}>
         <li className={styles.prevButtonContainer}>
           <PaginationNavigationButton

package/src/components/Pagination/PaginationPage/PaginationPageButton.tsx

@@ -5,7 +5,6 @@ import { Tappable, type TappableProps } from '../../Tappable/Tappable';
 import { Text } from '../../Typography/Text/Text';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import type { PaginationProps } from '../Pagination';
-import { getPageLabelDefault } from '../utils';
 import { getPaginationPageClassNames } from './usePaginationPageClasses';
 import styles from './PaginationPage.module.css';
 
@@ -26,7 +25,7 @@ const getTappablePropsFromPaginationPage = (
 ): TappableProps & { 'data-page': number } => {
   const {
     isCurrent = false,
-    getPageLabel = getPageLabelDefault,
+    getPageLabel,
     children,
     className,
     disabled,
@@ -40,6 +39,7 @@ const getTappablePropsFromPaginationPage = (
     sizeY,
   });
 
+  const pageLabel = getPageLabel?.(isCurrent);
   return {
     'className': classNames(pageClassNames, className),
     'activeMode': styles.stateActive,
@@ -49,7 +49,7 @@ const getTappablePropsFromPaginationPage = (
     'disabled': disabled,
     'children': (
       <Text normalize={false}>
-        <VisuallyHidden>{getPageLabel(isCurrent)} </VisuallyHidden>
+        {pageLabel && <VisuallyHidden>{pageLabel} </VisuallyHidden>}
         {children}
       </Text>
     ),

package/src/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -10,6 +10,11 @@
   position: relative;
 }
 
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.host :global(.vkuiIcon) {
+  box-sizing: content-box;
+}
+
 .host[disabled] {
   opacity: 0.6;
 }

package/src/components/Removable/Removable.module.css

@@ -2,6 +2,9 @@
   position: relative;
   display: flex;
   align-items: center;
+}
+
+.withPadding {
   padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
 }
 

package/src/components/Removable/Removable.tsx

@@ -150,6 +150,10 @@ interface RemovableOwnProps
    * @since 5.4.0
    */
   indent?: boolean;
+  /**
+   * Убирает базовые отступы для базовой платформы
+   */
+  noPadding?: boolean;
   children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);
 }
 
@@ -165,6 +169,7 @@ export const Removable = ({
   toggleButtonTestId,
   removeButtonTestId,
   disabled,
+  noPadding,
   ...restProps
 }: RemovableOwnProps): React.ReactNode => {
   const platform = usePlatform();
@@ -186,7 +191,13 @@ export const Removable = ({
       )}
     >
       {platform !== 'ios' && (
-        <div className={classNames(styles.content, 'vkuiInternalRemovable__content')}>
+        <div
+          className={classNames(
+            styles.content,
+            !noPadding && styles.withPadding,
+            'vkuiInternalRemovable__content',
+          )}
+        >
           {typeof children === 'function' ? children({ isRemoving: false }) : children}
 
           <IconButton

package/src/components/Search/Search.module.css

@@ -1,4 +1,5 @@
 .host {
+  box-sizing: content-box;
   display: flex;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;

package/src/components/SimpleCell/SimpleCell.module.css

@@ -32,6 +32,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .before > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-end: var(--vkui--spacing_size_xs);
 }
 
@@ -125,6 +126,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .after > :global(.vkuiIcon) {
+  box-sizing: content-box;
   padding-inline-start: var(--vkui--spacing_size_m);
 }
 

package/src/components/SubnavigationButton/SubnavigationButton.module.css

@@ -80,6 +80,7 @@
 }
 
 .chevronIcon {
+  box-sizing: content-box;
   margin-inline-start: 8px;
   margin-block-start: 1px; /* Смещает иконку относительно текста */
   color: var(--vkui--color_icon_secondary);

package/src/components/TabbarItem/TabbarItem.tsx

@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { usePlatform } from '../../hooks/usePlatform';
+import { callMultiple } from '../../lib/callMultiple';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
 import type { HasComponent, HasRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -38,6 +41,8 @@ export const TabbarItem = ({
   href,
   Component = href ? 'a' : 'button',
   disabled,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
   ...restProps
 }: TabbarItemProps): React.ReactNode => {
   const platform = usePlatform();
@@ -50,11 +55,22 @@ export const TabbarItem = ({
     }
   }
 
+  const {
+    focusVisible,
+    onFocus: handleFocusVisibleOnFocus,
+    onBlur: handleFocusVisibleOnBlur,
+  } = useFocusVisible();
+  const focusVisibleClassNames = useFocusVisibleClassName({
+    focusVisible,
+  });
+
   return (
     <RootComponent
       Component={Component}
       {...restProps}
       disabled={disabled}
+      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}
+      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}
       href={href}
       baseClassName={classNames(
         styles.host,
@@ -69,8 +85,9 @@ export const TabbarItem = ({
         activeMode={platform === 'ios' ? styles.tappableActive : 'background'}
         activeEffectDelay={platform === 'ios' ? 0 : 300}
         hasHover={false}
-        className={styles.tappable}
+        className={classNames(styles.tappable, focusVisibleClassNames)}
         onClick={noop}
+        tabIndex={-1}
       />
       <div className={styles.in}>
         <div className={styles.icon}>

package/src/components/TooltipBase/TooltipBase.module.css

@@ -3,6 +3,7 @@
 }
 
 .content {
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/src/components/TooltipBase/TooltipBase.tsx

@@ -35,6 +35,11 @@ export interface TooltipBaseProps
    * Заголовок тултипа.
    */
   title?: React.ReactNode;
+  /**
+   * [a11y] Id для заголовка тултипа.
+   * Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`
+   */
+  titleId?: string;
   /**
    * Для показа указателя, требуется передать хотя бы `coords` и `placement`.
    */
@@ -85,6 +90,7 @@ export const TooltipBase = ({
   ArrowIcon = DefaultIcon,
   description,
   title,
+  titleId,
   maxWidth = TOOLTIP_MAX_WIDTH,
   closeIconLabel = 'Закрыть',
   onCloseIconClick,
@@ -111,7 +117,7 @@ export const TooltipBase = ({
       <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>
         <div>
           {hasReactNode(title) && (
-            <Subhead className={styles.title} weight="2">
+            <Subhead id={titleId} className={styles.title} weight="2">
               {title}
             </Subhead>
           )}

package/src/hooks/useFocusTrap.ts

@@ -166,7 +166,7 @@ export const useFocusTrap = (
 
     recalculateFocusableNodesRef(parentNode);
 
-    if (!autoFocus || arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+    if (disabled || !autoFocus || arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
       return;
     }
 

package/src/types.ts

@@ -51,7 +51,8 @@ export interface Version {
 export type AnchorHTMLAttributesOnly = Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof React.HTMLAttributes<HTMLAnchorElement>
->;
+> &
+  React.AriaAttributes;
 
 /**
  * Проверяет, является ли тип подтипом другого.

package/dist/components/Pagination/utils.d.ts

@@ -1,2 +0,0 @@
-export declare function getPageLabelDefault(isCurrent: boolean): string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/components/Pagination/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,CAE9D"}

package/dist/components/Pagination/utils.js

@@ -1,5 +0,0 @@
-export function getPageLabelDefault(isCurrent) {
-    return isCurrent ? `Страница` : `Перейти на страницу`;
-}
-
-//# sourceMappingURL=utils.js.map