@vkontakte/vkui 6.5.3 → 6.7.0

package/src/components/Group/GroupContainer.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import type { SizeTypeValues } from '../../lib/adaptivity';
+import { warnOnce } from '../../lib/warnOnce';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { AppRootContext } from '../AppRoot/AppRootContext';
+import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Group.module.css';
+
+const sizeXClassNames = {
+  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),
+  regular: styles['Group--sizeX-regular'],
+  compact: styles['Group--sizeX-compact'],
+};
+
+const stylesMode = {
+  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
+  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
+  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),
+};
+
+const stylesPadding = {
+  s: styles['Group--padding-s'],
+  m: styles['Group--padding-m'],
+};
+
+type GroupMode = 'plain' | 'card' | 'none';
+
+/**
+ * Вычисляем mode для Group.
+ */
+function useGroupMode(
+  forcedMode: GroupContainerProps['mode'],
+  sizeX: SizeTypeValues | 'none',
+  isInsideModal: boolean,
+): GroupMode {
+  const { layout } = React.useContext(AppRootContext);
+
+  if (forcedMode) {
+    return forcedMode;
+  }
+
+  if (isInsideModal) {
+    return 'plain';
+  }
+
+  if (layout) {
+    return layout;
+  }
+
+  if (sizeX !== 'none') {
+    return sizeX === 'regular' ? 'card' : 'plain';
+  }
+
+  return 'none';
+}
+
+export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &
+  HasComponent & {
+    /**
+    `show` (только для `mode="plain"`) - разделитель всегда показывается
+    `hide` - разделитель всегда спрятан,
+    `auto` - разделитель рисуется автоматически между соседними группами.
+   */
+    separator?: 'show' | 'hide' | 'auto';
+    /**
+     * Режим отображения. Если установлен `card`, выглядит как карточка c
+     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
+     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)
+     * В модальных окнах по умолчанию `plain`.
+     */
+    mode?: 'plain' | 'card';
+    /**
+     * Отвечает за отступы вокруг контента в режиме `card`.
+     */
+    padding?: 's' | 'm';
+  };
+
+const warn = warnOnce('Group');
+
+export const GroupContainer: React.FC<GroupContainerProps> = ({
+  children,
+  separator = 'auto',
+  mode: modeProps,
+  padding = 'm',
+  tabIndex: tabIndexProp,
+  ...restProps
+}: GroupContainerProps) => {
+  const { isInsideModal } = React.useContext(ModalRootContext);
+  const { sizeX = 'none' } = useAdaptivity();
+
+  const mode = useGroupMode(modeProps, sizeX, isInsideModal);
+
+  const isTabPanel = restProps.role === 'tabpanel';
+
+  if (
+    process.env.NODE_ENV === 'development' &&
+    isTabPanel &&
+    (!restProps['aria-controls'] || !restProps['id'])
+  ) {
+    warn(
+      'При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"',
+    );
+  }
+
+  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
+
+  let siblingSeparatorElement: React.ReactNode = null;
+  switch (separator) {
+    case 'auto':
+      siblingSeparatorElement = <div className={styles['Group__separator-sibling']} />;
+      break;
+    case 'show':
+      siblingSeparatorElement = (
+        <div
+          className={classNames(
+            styles['Group__separator-sibling'],
+            mode === 'plain' || mode === 'none'
+              ? styles['Group__separator-sibling--forced']
+              : undefined,
+          )}
+        />
+      );
+      break;
+    case 'hide':
+      break;
+  }
+  return (
+    <>
+      <RootComponent
+        Component="section"
+        {...restProps}
+        tabIndex={tabIndex}
+        baseClassName={classNames(
+          'vkuiInternalGroup',
+          styles['Group'],
+          sizeXClassNames[sizeX],
+          mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],
+          stylesMode[mode],
+          stylesPadding[padding],
+        )}
+      >
+        {children}
+      </RootComponent>
+      {siblingSeparatorElement}
+    </>
+  );
+};
+GroupContainer.displayName = 'GroupContainer';

package/src/components/Group/GroupDescription.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import styles from './Group.module.css';
+
+export type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export const GroupDescription: React.FC<GroupDescriptionProps> = ({
+  className,
+  ...restProps
+}: GroupDescriptionProps): React.ReactNode => (
+  <Footnote className={classNames(className, styles['Group__description'])} {...restProps} />
+);
+GroupDescription.displayName = 'GroupDescription';

package/src/components/Group/GroupExpandedContent.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Group.module.css';
+
+const stylesDirection = {
+  inline: styles['Group__expanded-content--inline'],
+  block: styles['Group__expanded-content--block'],
+};
+
+export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &
+  HasComponent & {
+    direction?: 'inline' | 'block';
+  };
+export const GroupExpandedContent: React.FC<GroupExpandedContentProps> = ({
+  direction = 'inline',
+  ...restProps
+}: GroupExpandedContentProps) => {
+  return (
+    <RootComponent
+      Component="div"
+      {...restProps}
+      baseClassName={classNames(styles['Group__expanded-content'], stylesDirection[direction])}
+    />
+  );
+};

package/src/components/Group/GroupHeader.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import styles from './Group.module.css';
+
+export type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export const GroupHeader: React.FC<GroupHeaderProps> = ({
+  className,
+  ...restProps
+}: GroupHeaderProps): React.ReactNode => (
+  <div className={classNames(className, styles['Group__header'])} {...restProps} />
+);
+GroupHeader.displayName = 'GroupHeader';

package/src/components/Header/Header.module.css

@@ -6,6 +6,46 @@
   font-family: var(--vkui--font_family_base);
 }
 
+.Header__before,
+.Header__subtitleBefore,
+.Header__subtitleAfter,
+.Header__content__before,
+.Header__content__after {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.Header__before {
+  align-self: center;
+  margin-inline-end: var(--vkui--spacing_size_m);
+  margin-block-start: var(--vkui--spacing_size_3xs);
+}
+
+.Header__before--withSubtitle {
+  margin-block-start: var(--vkui--spacing_size_s);
+}
+
+.Header__subtitleWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.Header__subtitleBefore {
+  margin-inline-end: var(--vkui--spacing_size_xs);
+}
+
+.Header__subtitleAfter {
+  margin-inline-start: var(--vkui--spacing_size_xs);
+}
+
+.Header__content__before {
+  margin-inline-end: var(--vkui--spacing_size_xs);
+}
+
+.Header__content__after {
+  margin-inline-start: var(--vkui--spacing_size_xs);
+}
+
 .Header__main {
   flex: 1 0 0;
   min-inline-size: 0;
@@ -27,6 +67,7 @@
 .Header__content--multiline {
   white-space: initial;
   word-break: break-word;
+  flex-grow: 1;
 }
 
 .Header__subtitle {
@@ -41,7 +82,7 @@
 
 .Header__indicator {
   color: var(--vkui--color_text_secondary);
-  margin-inline-start: 6px;
+  margin-inline-start: var(--vkui--spacing_size_xs);
   flex-shrink: 0;
 }
 
@@ -104,12 +145,12 @@
   margin-block-end: 9px;
 }
 
-.Header__subtitle {
+.Header__subtitleWrapper {
   margin-block-end: 7px;
 }
 
 /* Компенсируем 1 пиксель из-за паддинга в .Header--mode-primary */
-.Header--mode-primary .Header__subtitle {
+.Header--mode-primary .Header__subtitleWrapper {
   margin-block-end: 6px;
 }
 
@@ -147,7 +188,7 @@
 :global(.vkuiInternalGroup--mode-card)
   > :global(.vkuiInternalTappable):first-child
   > .Header:not(.Header--mode-tertiary) {
-  margin-block-start: -4px;
+  margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
 }
 
 @media (--sizeX-regular) {
@@ -157,7 +198,7 @@
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > :global(.vkuiInternalTappable):first-child
     > .Header:not(.Header--mode-tertiary) {
-    margin-block-start: -4px;
+    margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
   }
 }
 

package/src/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
@@ -25,6 +25,26 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
    */
   indicator?: React.ReactNode;
   multiline?: boolean;
+  /**
+   * Иконка слева (рекомендуется использовать размер 28px)
+   */
+  before?: React.ReactNode;
+  /**
+   * Иконка слева от title (рекомендуется использовать размер 16px)
+   */
+  beforeTitle?: React.ReactNode;
+  /**
+   * Иконка справа от title (рекомендуется использовать размер 16px)
+   */
+  afterTitle?: React.ReactNode;
+  /**
+   * Иконка слева от subtitle (рекомендуется использовать размер 12px)
+   */
+  beforeSubtitle?: React.ReactNode;
+  /**
+   * Иконка справа от subtitle (рекомендуется использовать размер 12px)
+   */
+  afterSubtitle?: React.ReactNode;
 }
 
 type HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &
@@ -83,6 +103,11 @@ export const Header = ({
   indicator,
   aside,
   multiline,
+  before,
+  beforeTitle,
+  afterTitle,
+  beforeSubtitle,
+  afterSubtitle,
   ...restProps
 }: HeaderProps): React.ReactNode => {
   return (
@@ -96,6 +121,16 @@ export const Header = ({
         hasReactNode(subtitle) && styles['Header--with-subtitle'],
       )}
     >
+      {before && (
+        <div
+          className={classNames(
+            styles['Header__before'],
+            subtitle && styles['Header__before--withSubtitle'],
+          )}
+        >
+          {before}
+        </div>
+      )}
       <div className={styles['Header__main']}>
         <HeaderContent
           className={styles['Header__content']}
@@ -103,6 +138,7 @@ export const Header = ({
           mode={mode}
           size={size}
         >
+          {beforeTitle && <div className={styles['Header__content__before']}>{beforeTitle}</div>}
           <span
             className={classNames(
               styles['Header__content-in'],
@@ -111,23 +147,31 @@ export const Header = ({
           >
             {children}
           </span>
+          {afterTitle && <div className={styles['Header__content__after']}>{afterTitle}</div>}
           {hasReactNode(indicator) && (
             <Footnote className={styles['Header__indicator']} weight="2">
               {indicator}
             </Footnote>
           )}
         </HeaderContent>
-
         {hasReactNode(subtitle) && (
-          <Subhead
-            className={classNames(
-              styles['Header__subtitle'],
-              multiline && styles['Header__content--multiline'],
+          <div className={styles['Header__subtitleWrapper']}>
+            {beforeSubtitle && (
+              <div className={styles['Header__subtitleBefore']}>{beforeSubtitle}</div>
             )}
-            Component={subtitleComponent}
-          >
-            {subtitle}
-          </Subhead>
+            <Subhead
+              className={classNames(
+                styles['Header__subtitle'],
+                multiline && styles['Header__content--multiline'],
+              )}
+              Component={subtitleComponent}
+            >
+              {subtitle}
+            </Subhead>
+            {afterSubtitle && (
+              <div className={styles['Header__subtitleAfter']}>{afterSubtitle}</div>
+            )}
+          </div>
         )}
       </div>
 

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
+import type { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
 import { Avatar } from '../Avatar/Avatar';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -1,9 +1,9 @@
 import { Icon28ChevronRightCircle } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { HasRef, HasRootRef, LiteralUnion } from '../../../types';
+import type { HasRef, HasRootRef, LiteralUnion } from '../../../types';
 import type { ImageBaseSize } from '../../ImageBase/ImageBase';
-import { Tappable, TappableProps } from '../../Tappable/Tappable';
-import { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';
+import { Tappable, type TappableProps } from '../../Tappable/Tappable';
+import { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';
 import styles from './HorizontalCellShowMore.module.css';
 
 const sizeClassNames = {

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -5,7 +5,7 @@ import { useDirection } from '../../hooks/useDirection';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
-import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import styles from './HorizontalScroll.module.css';
@@ -291,7 +291,7 @@ export const HorizontalScroll = ({
     >
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
         <ScrollArrow
-          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowLeft' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="left"
@@ -306,7 +306,7 @@ export const HorizontalScroll = ({
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
         <ScrollArrow
-          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowRight' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="right"

package/src/components/IconButton/IconButton.tsx

@@ -3,7 +3,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './IconButton.module.css';
 

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.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 { ImageBaseContext } from '../context';
 import type { ImageBaseExpectedIconProps } from '../types';

package/src/components/ImageBase/ImageBaseOverlay/types.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { HasRootRef } from '../../../types';
+import type * as React from 'react';
+import type { HasRootRef } from '../../../types';
 import type { ImageBaseExpectedIconProps } from '../types';
 
 export interface ImageBaseOverlayCommonProps

package/src/components/ImageBase/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ImageBaseContextProps } from './types';
+import type { ImageBaseContextProps } from './types';
 
 export const ImageBaseContext: React.Context<ImageBaseContextProps> =
   React.createContext<ImageBaseContextProps>({

package/src/components/InfoRow/InfoRow.tsx

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

package/src/components/Input/Input.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
-import { FormField, FormFieldProps } from '../FormField/FormField';
+import type { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';
 import styles from './Input.module.css';
 
 const sizeYClassNames = {
   none: styles['Input--sizeY-none'],
-  ['compact']: styles['Input--sizeY-compact'],
+  compact: styles['Input--sizeY-compact'],
 };
 
 export interface InputProps

package/src/components/Link/Link.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
-import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 
 export interface LinkProps extends TappableProps {

package/src/components/List/List.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './List.module.css';
 

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+import { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 
 export interface LocaleProviderProps {

package/src/components/Mark/Mark.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Mark.module.css';
 

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Icon16Chevron } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';

package/src/components/ModalCard/ModalCard.tsx

@@ -3,9 +3,9 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
+import { ModalCardBase, type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
 import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './ModalCard.module.css';

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -3,7 +3,7 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Spacing } from '../Spacing/Spacing';

package/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx

@@ -3,7 +3,7 @@ import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalCardBase.module.css';
 

package/src/components/ModalPage/ModalPage.tsx

@@ -4,10 +4,10 @@ import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJS
 import { useExternRef } from '../../hooks/useExternRef';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
 import { usePlatform } from '../../hooks/usePlatform';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { multiRef } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
-import { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef } from '../../types';
 import { ModalPageContext } from '../ModalPage/ModalPageContext';
-import { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';
+import { PanelHeader, type PanelHeaderProps } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
 import styles from './ModalPageHeader.module.css';