@vkontakte/vkui 6.5.3 → 6.7.0

package/src/components/ModalRoot/ModalRoot.tsx

@@ -3,18 +3,18 @@ import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
-import { DOMProps, withDOM } from '../../lib/dom';
+import { type DOMProps, withDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
 import { rubber } from '../../lib/touch';
 import { warnOnce } from '../../lib/warnOnce';
 import { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { Touch, TouchEvent } from '../Touch/Touch';
+import { type CustomTouchEvent, Touch } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
-import { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';
+import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
 import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
-import { ModalRootWithDOMProps, ModalsStateEntry, TranslateRange } from './types';
-import { ModalTransitionProps, withModalManager } from './useModalManager';
+import type { ModalRootWithDOMProps, ModalsStateEntry, TranslateRange } from './types';
+import { type ModalTransitionProps, withModalManager } from './useModalManager';
 import styles from './ModalRoot.module.css';
 
 const warn = warnOnce('ModalRoot');
@@ -242,7 +242,7 @@ class ModalRootTouchComponent extends React.Component<
     }
   }
 
-  onTouchMove = (e: TouchEvent) => {
+  onTouchMove = (e: CustomTouchEvent) => {
     if (this.props.exitingModal) {
       return;
     }
@@ -260,7 +260,7 @@ class ModalRootTouchComponent extends React.Component<
     }
   };
 
-  onPageTouchMove(event: TouchEvent, modalState: ModalsStateEntry) {
+  onPageTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {
     const { shiftY, originalEvent } = event;
     const target = originalEvent.target as HTMLElement;
 
@@ -317,7 +317,7 @@ class ModalRootTouchComponent extends React.Component<
     }
   }
 
-  onCardTouchMove(event: TouchEvent, modalState: ModalsStateEntry) {
+  onCardTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {
     const { originalEvent, shiftY } = event;
     const target = originalEvent.target as HTMLElement;
     if (modalState.innerElement?.contains(target)) {
@@ -336,7 +336,7 @@ class ModalRootTouchComponent extends React.Component<
     }
   }
 
-  onTouchEnd = (e: TouchEvent) => {
+  onTouchEnd = (e: CustomTouchEvent) => {
     const modalState = this.props.getModalState(this.props.activeModal);
 
     if (modalState?.type === 'page') {
@@ -348,7 +348,7 @@ class ModalRootTouchComponent extends React.Component<
     }
   };
 
-  onPageTouchEnd(event: TouchEvent, modalState: ModalsStateEntry) {
+  onPageTouchEnd(event: CustomTouchEvent, modalState: ModalsStateEntry) {
     const { startY, shiftY } = event;
 
     modalState.contentScrolled = false;
@@ -417,7 +417,7 @@ class ModalRootTouchComponent extends React.Component<
     );
   }
 
-  onCardTouchEnd({ duration }: TouchEvent, modalState: ModalsStateEntry) {
+  onCardTouchEnd({ duration }: CustomTouchEvent, modalState: ModalsStateEntry) {
     let setStateCallback;
 
     if (this.state.dragging) {

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -3,7 +3,7 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { ModalRootTouch } from './ModalRoot';
 import { ModalRootDesktop } from './ModalRootDesktop';
-import { ModalRootProps } from './types';
+import type { ModalRootProps } from './types';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalRoot

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { ModalElements, ModalsStateEntry, ModalType } from './types';
+import type { ModalElements, ModalsStateEntry, ModalType } from './types';
 
 export type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>;
 type ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -9,8 +9,8 @@ import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';
-import { ModalRootWithDOMProps, ModalsStateEntry } from './types';
+import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
+import type { ModalRootWithDOMProps, ModalsStateEntry } from './types';
 import { useModalManager } from './useModalManager';
 import styles from './ModalRoot.module.css';
 
@@ -144,7 +144,19 @@ export const ModalRootDesktop = ({
     // Анимация закрытия модального окна
     if (!activeModal) {
       requestAnimationFrame(() => {
-        waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);
+        waitTransitionFinish(
+          prevModalState?.innerElement,
+          (event) => {
+            // Исключаем дочерние элементы
+            if (event && event.target === prevModalState?.innerElement) {
+              onExited(id);
+            } else if (!event) {
+              // Вызвался по тайм-ауту
+              onExited(id);
+            }
+          },
+          timeout,
+        );
         animateModalOpacity(prevModalState, false);
         setMaskOpacity(prevModalState, 0);
       });

package/src/components/ModalRoot/constants.ts

@@ -1,4 +1 @@
 export const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
-
-export const PERCENT_OPENED = 0;
-export const PERCENT_CLOSED = 100;

package/src/components/ModalRoot/types.ts

@@ -1,6 +1,6 @@
-import { DOMContextInterface } from '../../lib/dom';
-import { HasPlatform } from '../../types';
-import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+import type { DOMContextInterface } from '../../lib/dom';
+import type { HasPlatform } from '../../types';
+import type { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 
 export type ModalType = 'page' | 'card';
 

package/src/components/ModalRoot/useModalManager.tsx

@@ -3,8 +3,8 @@ import { isFunction, noop } from '@vkontakte/vkjs';
 import { getNavId } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
-import { HasChildren } from '../../types';
-import { ModalsState, ModalsStateEntry } from './types';
+import type { HasChildren } from '../../types';
+import type { ModalsState, ModalsStateEntry } from './types';
 
 interface ModalTransitionState {
   activeModal?: string | null;

package/src/components/ModalRoot/useModalRootContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';
+import { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';
 
 export const useModalRootContext = (): ModalRootContextInterface =>
   React.useContext(ModalRootContext);

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';
+import type { ModalRootContextInterface } from './ModalRootContext';
+import { useModalRootContext } from './useModalRootContext';
 
 type PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;
 
@@ -7,7 +8,7 @@ export function withModalRootContext<P extends PickedProps>(
   Component: React.ComponentType<P>,
 ): React.ComponentType<Omit<P, keyof PickedProps>> {
   function WithModalRootContext(props: Omit<P, keyof PickedProps>) {
-    const { updateModalHeight } = React.useContext(ModalRootContext);
+    const { updateModalHeight } = useModalRootContext();
 
     return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;
   }

package/src/components/NativeSelect/NativeSelect.tsx

@@ -5,16 +5,16 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { callMultiple } from '../../lib/callMultiple';
 import { getFormFieldModeFromSelectType } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
+import type { HasAlign, HasRef, HasRootRef } from '../../types';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
-import { FormField, FormFieldProps } from '../FormField/FormField';
+import { FormField, type FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 import { SelectTypography } from '../SelectTypography/SelectTypography';
 import styles from '../Select/Select.module.css';
 
 const sizeYClassNames = {
   none: styles['Select--sizeY-none'],
-  ['compact']: styles['Select--sizeY-compact'],
+  compact: styles['Select--sizeY-compact'],
 };
 
 export interface NativeSelectProps

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -14,7 +14,7 @@ import {
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
-import { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
+import type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';
@@ -36,7 +36,10 @@ type AllowedFloatingComponentProps = Pick<
   | 'disableFlipMiddleware'
 >;
 
-type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;
+type AllowedTooltipBaseProps = Omit<
+  TooltipBaseProps,
+  'arrowProps' | 'closeIconLabel' | 'onCloseIconClick'
+>;
 
 type AllowedFloatingArrowProps = {
   /**

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -13,8 +13,11 @@ export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<
   React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>
 > = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(
   ({ fixed = false, Component = 'div', ...props }, ref) => {
-    props[onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';
-    return <Component {...props} ref={ref} />;
+    const dataProps = {
+      [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',
+    };
+
+    return <Component {...dataProps} {...props} ref={ref} />;
   },
 );
 

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { PaginationPageType, usePagination } from '../../hooks/usePagination';
+import { type PaginationPageType, usePagination } from '../../hooks/usePagination';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';

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

@@ -20,7 +20,7 @@ export interface PaginationNavigationButtonProps extends PaginationNavigationBut
 /**
  * @private
  */
-export const getButtonPropsFromPaginationNavigationButton = (
+const getButtonPropsFromPaginationNavigationButton = (
   opts: PaginationNavigationButtonOpts,
 ): ButtonProps & { 'data-page': number | undefined } => {
   const icon: React.ReactElement | null =

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

@@ -4,7 +4,7 @@ import { type SizeTypeValues } from '../../../lib/adaptivity';
 import { Tappable, type TappableProps } from '../../Tappable/Tappable';
 import { Text } from '../../Typography/Text/Text';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
-import { PaginationProps } from '../Pagination';
+import type { PaginationProps } from '../Pagination';
 import { getPageLabelDefault } from '../utils';
 import { getPaginationPageClassNames } from './usePaginationPageClasses';
 import styles from './PaginationPage.module.css';
@@ -21,7 +21,7 @@ export interface PaginationPageButtonProps extends PaginationPageButtonOpts {
   renderPageButton?: (props: CustomPaginationPageButtonProps) => React.ReactNode;
 }
 
-export const getTappablePropsFromPaginationPage = (
+const getTappablePropsFromPaginationPage = (
   opts: PaginationPageButtonOpts,
 ): TappableProps & { 'data-page': number } => {
   const {

package/src/components/Pagination/PaginationPage/usePaginationPageClasses.ts

@@ -1,6 +1,6 @@
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
-import { SizeTypeValues } from '../../../lib/adaptivity';
+import type { SizeTypeValues } from '../../../lib/adaptivity';
 import styles from './PaginationPage.module.css';
 
 export interface UsePaginationPageClassNamesProps {

package/src/components/Panel/Panel.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { SizeTypeValues } from '../../lib/adaptivity';
-import { NavIdProps } from '../../lib/getNavId';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { SizeTypeValues } from '../../lib/adaptivity';
+import type { NavIdProps } from '../../lib/getNavId';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
 import { NavPanelIdContext } from '../NavIdContext/NavIdContext';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
@@ -13,8 +13,8 @@ import styles from './Panel.module.css';
 
 const sizeXClassNames = {
   none: styles['Panel--sizeX-none'],
-  ['compact']: styles['Panel--sizeX-compact'],
-  ['regular']: styles['Panel--sizeX-regular'],
+  compact: styles['Panel--sizeX-compact'],
+  regular: styles['Panel--sizeX-regular'],
 };
 
 const stylesMode = {

package/src/components/PanelHeader/PanelHeader.tsx

@@ -3,7 +3,12 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasComponent, HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type {
+  HasComponent,
+  HasDataAttribute,
+  HasRef,
+  HTMLAttributesWithRootRef,
+} from '../../types';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -9,9 +9,12 @@ import {
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
-import { PlatformType } from '../../lib/platform';
+import type { PlatformType } from '../../lib/platform';
 import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import {
+  PanelHeaderButton,
+  type PanelHeaderButtonProps,
+} from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from '../PanelHeaderButton/PanelHeaderButton.module.css';
 

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

@@ -79,14 +79,16 @@
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalCounter)) {
+.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) {
   transition: opacity 0.3s;
   opacity: 0.7;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(:global(.vkuiInternalCounter)),
-.PanelHeaderButton--vkcom.PanelHeaderButton--active > :not(:global(.vkuiInternalCounter)) {
+.PanelHeaderButton--vkcom.PanelHeaderButton--hover
+  > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)),
+.PanelHeaderButton--vkcom.PanelHeaderButton--active
+  > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)) {
   opacity: 1;
 }
 
@@ -119,3 +121,42 @@
     display: none;
   }
 }
+
+/*
+ * CMP:
+ * Counter
+ */
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiInternalCounter) {
+  position: absolute;
+  padding: 0;
+  inset-block-start: 4px;
+  inset-inline-end: 4px;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalCounter),
+.PanelHeaderButton--ios :global(.vkuiInternalCounter) {
+  inset-block-start: 2px;
+  inset-inline-end: 2px;
+}
+
+/*
+ * CMP:
+ * Badge
+ */
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiInternalBadge) {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalBadge),
+.PanelHeaderButton--ios :global(.vkuiInternalBadge) {
+  inset-block-start: 6px;
+  inset-inline-end: 6px;
+}

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -3,7 +3,7 @@ import { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { hasAccessibleName } from '../../lib/accessibility';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
-import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './PanelHeaderButton.module.css';
@@ -16,6 +16,7 @@ const platformClassNames = {
 
 export interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {
   primary?: boolean;
+  // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы
   label?: React.ReactNode;
 }
 
@@ -90,7 +91,6 @@ export const PanelHeaderButton = ({
       activeEffectDelay={200}
       activeMode={activeMode}
       className={classNames(
-        'vkuiInternalPanelHeaderButton',
         styles['PanelHeaderButton'],
         platformClassNames.hasOwnProperty(platform)
           ? platformClassNames[platform]

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -1,7 +1,10 @@
 import { Icon24CancelOutline, Icon28CancelOutline } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
 import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import {
+  PanelHeaderButton,
+  type PanelHeaderButtonProps,
+} from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
 /**

package/src/components/PanelHeaderContent/PanelHeaderContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasChildren, HTMLAttributesWithRootRef } from '../../types';
+import type { HasChildren, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -7,7 +7,10 @@ import {
 } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
 import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import {
+  PanelHeaderButton,
+  type PanelHeaderButtonProps,
+} from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
 export interface PanelHeaderEditProps extends PanelHeaderButtonProps {

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -1,7 +1,10 @@
 import { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';
 import { usePlatform } from '../../hooks/usePlatform';
 import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import {
+  PanelHeaderButton,
+  type PanelHeaderButtonProps,
+} from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
 /**

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Spinner, SpinnerProps } from '../Spinner/Spinner';
+import { Spinner, type SpinnerProps } from '../Spinner/Spinner';
 
 export interface PanelSpinnerProps extends SpinnerProps {
   height?: number;

package/src/components/Placeholder/Placeholder.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';

package/src/components/PlatformProvider/PlatformProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PlatformType } from '../../lib/platform';
+import type { PlatformType } from '../../lib/platform';
 import { TokensClassProvider } from '../../lib/tokens';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutRoot.module.css';

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutWrapper.module.css';
 

package/src/components/Popover/Popover.tsx

@@ -23,6 +23,7 @@ import {
   type FloatingArrowProps as FloatingArrowPropsPrivate,
 } from '../FloatingArrow/FloatingArrow';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
+import type { FocusTrapProps } from '../FocusTrap/FocusTrap';
 import styles from './Popover.module.css';
 
 /**
@@ -82,7 +83,7 @@ type AllowedFloatingComponentProps = Pick<
  * @public
  */
 export interface PopoverProps
-  extends AllowedFloatingComponentProps,
+  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,
     Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {
   /**
    * Отключает у всплывающего элемента стилизацию по умолчанию.
@@ -121,6 +122,7 @@ export interface PopoverProps
    * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.
    */
   keepMounted?: boolean;
+  autoFocus?: FocusTrapProps['autoFocus'];
 }
 
 /**
@@ -225,9 +227,6 @@ export const Popover = ({
   let popover: React.ReactNode = null;
   if (shown || keepMounted) {
     const hidden = keepMounted && !shown;
-    if (!hidden) {
-      floatingProps.style.zIndex = String(zIndex);
-    }
 
     let arrow: React.ReactElement | null = null;
     if (withArrow) {
@@ -250,6 +249,10 @@ export const Popover = ({
           ref={refs.setFloating}
           className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}
           {...floatingProps}
+          style={{
+            zIndex: !hidden ? zIndex : undefined,
+            ...floatingProps.style,
+          }}
         >
           <FocusTrap
             {...restPopoverProps}

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Progress.module.css';
 

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -3,19 +3,19 @@ import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
-import { DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';
+import { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { AnyFunction, HasChildren } from '../../types';
-import { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
+import type { AnyFunction, HasChildren } from '../../types';
+import { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { Touch, TouchEvent as TouchEventInternal, TouchProps } from '../Touch/Touch';
+import { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { PullToRefreshSpinner } from './PullToRefreshSpinner';
 import styles from './PullToRefresh.module.css';
 
 const WAIT_FETCHING_TIMEOUT_MS = 1000;
 
-function cancelEvent(event: TouchEventInternal) {
+function cancelEvent(event: CustomTouchEvent) {
   /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */
   if (!event) {
     return false;
@@ -160,7 +160,7 @@ export const PullToRefresh = ({
 
   const startYRef = React.useRef(0);
 
-  const onTouchStart = (event: TouchEventInternal) => {
+  const onTouchStart = (event: CustomTouchEvent) => {
     if (refreshing) {
       cancelEvent(event);
       return;
@@ -170,7 +170,7 @@ export const PullToRefresh = ({
   };
 
   const iosRefreshStartedRef = React.useRef(false);
-  const onTouchMove = (event: TouchEventInternal) => {
+  const onTouchMove = (event: CustomTouchEvent) => {
     const { isY, shiftY } = event;
     const { start, max } = initParams;
     const pageYOffset = scroll?.getScroll().y;

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './PullToRefresh.module.css';