@vkontakte/vkui 6.5.3 → 6.7.0

package/src/components/Typography/Headline/Headline.module.css

@@ -6,14 +6,34 @@
 }
 
 .Headline--sizeY-compact.Headline--level-1 {
-  font-size: var(--vkui--font_headline1--font_size--compact);
-  line-height: var(--vkui--font_headline1--line_height--compact);
+  font-size: var(
+    --vkui--font_headline1--font_size--compact,
+    var(--vkui--font_headline1--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_headline1--line_height--compact,
+    var(--vkui--font_headline1--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_headline1--font_weight--compact,
+    var(--vkui--font_headline1--font_weight--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Headline--sizeY-none.Headline--level-1 {
-    font-size: var(--vkui--font_headline1--font_size--compact);
-    line-height: var(--vkui--font_headline1--line_height--compact);
+    font-size: var(
+      --vkui--font_headline1--font_size--compact,
+      var(--vkui--font_headline1--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_headline1--line_height--compact,
+      var(--vkui--font_headline1--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_headline1--font_weight--compact,
+      var(--vkui--font_headline1--font_weight--regular)
+    );
   }
 }
 
@@ -25,13 +45,33 @@
 }
 
 .Headline--sizeY-compact.Headline--level-2 {
-  font-size: var(--vkui--font_headline2--font_size--compact);
-  line-height: var(--vkui--font_headline2--line_height--compact);
+  font-size: var(
+    --vkui--font_headline2--font_size--compact,
+    var(--vkui--font_headline2--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_headline2--line_height--compact,
+    var(--vkui--font_headline2--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_headline2--font_weight--compact,
+    var(--vkui--font_headline2--font_weight--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Headline--sizeY-none.Headline--level-2 {
-    font-size: var(--vkui--font_headline2--font_size--compact);
-    line-height: var(--vkui--font_headline2--line_height--compact);
+    font-size: var(
+      --vkui--font_headline2--font_size--compact,
+      var(--vkui--font_headline2--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_headline2--line_height--compact,
+      var(--vkui--font_headline2--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_headline2--font_weight--compact,
+      var(--vkui--font_headline2--font_weight--regular)
+    );
   }
 }

package/src/components/Typography/Headline/Headline.tsx

@@ -1,6 +1,6 @@
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
-import { Typography, TypographyProps } from '../Typography';
+import { Typography, type TypographyProps } from '../Typography';
 import styles from './Headline.module.css';
 
 const stylesLevel = {
@@ -10,7 +10,7 @@ const stylesLevel = {
 
 const sizeYClassNames = {
   none: styles['Headline--sizeY-none'],
-  ['compact']: styles['Headline--sizeY-compact'],
+  compact: styles['Headline--sizeY-compact'],
 };
 
 export interface HeadlineProps extends TypographyProps {
@@ -24,7 +24,6 @@ export interface HeadlineProps extends TypographyProps {
  */
 export const Headline = ({
   className,
-  weight = '3',
   level = '1',
   Component = 'span',
   normalize = true,
@@ -38,7 +37,6 @@ export const Headline = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      weight={weight}
       className={classNames(
         className,
         sizeY !== 'regular' && sizeYClassNames[sizeY],

package/src/components/Typography/Paragraph/Paragraph.module.css

@@ -4,3 +4,43 @@
   font-weight: var(--vkui--font_paragraph--font_weight--regular);
   font-family: var(--vkui--font_paragraph--font_family--regular);
 }
+
+.Paragraph--sizeY-compact {
+  font-size: var(
+    --vkui--font_paragraph--font_size--compact,
+    var(--vkui--font_paragraph--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_paragraph--line_height--compact,
+    var(--vkui--font_paragraph--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_paragraph--font_weight--compact,
+    var(--vkui--font_paragraph--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_paragraph--font_family--compact,
+    var(--vkui--font_paragraph--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Paragraph--sizeY-none {
+    font-size: var(
+      --vkui--font_paragraph--font_size--compact,
+      var(--vkui--font_paragraph--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_paragraph--line_height--compact,
+      var(--vkui--font_paragraph--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_paragraph--font_weight--compact,
+      var(--vkui--font_paragraph--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_paragraph--font_family--compact,
+      var(--vkui--font_paragraph--font_family--regular)
+    );
+  }
+}

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -1,7 +1,13 @@
 import { classNames } from '@vkontakte/vkjs';
-import { Typography, TypographyProps } from '../Typography';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { Typography, type TypographyProps } from '../Typography';
 import styles from './Paragraph.module.css';
 
+const sizeYClassNames = {
+  none: styles['Paragraph--sizeY-none'],
+  compact: styles['Paragraph--sizeY-compact'],
+};
+
 export type ParagraphProps = TypographyProps;
 
 /**
@@ -16,12 +22,18 @@ export const Paragraph = ({
   inline = false,
   ...restProps
 }: ParagraphProps): React.ReactNode => {
+  const { sizeY = 'none' } = useAdaptivity();
+
   return (
     <Typography
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(className, styles['Paragraph'])}
+      className={classNames(
+        className,
+        styles['Paragraph'],
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+      )}
       {...restProps}
     />
   );

package/src/components/Typography/Subhead/Subhead.module.css

@@ -6,13 +6,41 @@
 }
 
 .Subhead--sizeY-compact {
-  font-size: var(--vkui--font_subhead--font_size--compact);
-  line-height: var(--vkui--font_subhead--line_height--compact);
+  font-size: var(
+    --vkui--font_subhead--font_size--compact,
+    var(--vkui--font_subhead--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_subhead--line_height--compact,
+    var(--vkui--font_subhead--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_subhead--font_weight--compact,
+    var(--vkui--font_subhead--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_subhead--font_family--compact,
+    var(--vkui--font_subhead--font_family--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Subhead--sizeY-none {
-    font-size: var(--vkui--font_subhead--font_size--compact);
-    line-height: var(--vkui--font_subhead--line_height--compact);
+    font-size: var(
+      --vkui--font_subhead--font_size--compact,
+      var(--vkui--font_subhead--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_subhead--line_height--compact,
+      var(--vkui--font_subhead--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_subhead--font_weight--compact,
+      var(--vkui--font_subhead--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_subhead--font_family--compact,
+      var(--vkui--font_subhead--font_family--regular)
+    );
   }
 }

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,11 +1,11 @@
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
-import { Typography, TypographyProps } from '../Typography';
+import { Typography, type TypographyProps } from '../Typography';
 import styles from './Subhead.module.css';
 
 const sizeYClassNames = {
   none: styles['Subhead--sizeY-none'],
-  ['compact']: styles['Subhead--sizeY-compact'],
+  compact: styles['Subhead--sizeY-compact'],
 };
 
 export type SubheadProps = TypographyProps;

package/src/components/Typography/Text/Text.module.css

@@ -6,13 +6,38 @@
 }
 
 .Text--sizeY-compact {
-  font-size: var(--vkui--font_text--font_size--compact);
-  line-height: var(--vkui--font_text--line_height--compact);
+  font-size: var(--vkui--font_text--font_size--compact, var(--vkui--font_text--font_size--regular));
+  line-height: var(
+    --vkui--font_text--line_height--compact,
+    var(--vkui--font_text--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_text--font_weight--compact,
+    var(--vkui--font_text--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_text--font_family--compact,
+    var(--vkui--font_text--font_family--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Text--sizeY-none {
-    font-size: var(--vkui--font_text--font_size--compact);
-    line-height: var(--vkui--font_text--line_height--compact);
+    font-size: var(
+      --vkui--font_text--font_size--compact,
+      var(--vkui--font_text--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_text--line_height--compact,
+      var(--vkui--font_text--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_text--font_weight--compact,
+      var(--vkui--font_text--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_text--font_family--compact,
+      var(--vkui--font_text--font_family--regular)
+    );
   }
 }

package/src/components/Typography/Text/Text.tsx

@@ -1,11 +1,11 @@
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
-import { Typography, TypographyProps } from '../Typography';
+import { Typography, type TypographyProps } from '../Typography';
 import styles from './Text.module.css';
 
 const sizeYClassNames = {
   none: styles['Text--sizeY-none'],
-  ['compact']: styles['Text--sizeY-compact'],
+  compact: styles['Text--sizeY-compact'],
 };
 
 export type TextProps = TypographyProps;

package/src/components/Typography/Title/Title.module.css

@@ -5,6 +5,46 @@
   font-family: var(--vkui--font_title1--font_family--regular);
 }
 
+.Title--sizeY-compact.Title--level-1 {
+  font-size: var(
+    --vkui--font_title1--font_size--compact,
+    var(--vkui--font_title1--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title1--line_height--compact,
+    var(--vkui--font_title1--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title1--font_weight--compact,
+    var(--vkui--font_title1--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title1--font_family--compact,
+    var(--vkui--font_title1--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-1 {
+    font-size: var(
+      --vkui--font_title1--font_size--compact,
+      var(--vkui--font_title1--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title1--line_height--compact,
+      var(--vkui--font_title1--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title1--font_weight--compact,
+      var(--vkui--font_title1--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title1--font_family--compact,
+      var(--vkui--font_title1--font_family--regular)
+    );
+  }
+}
+
 .Title--level-2 {
   font-size: var(--vkui--font_title2--font_size--regular);
   line-height: var(--vkui--font_title2--line_height--regular);
@@ -12,9 +52,89 @@
   font-family: var(--vkui--font_title2--font_family--regular);
 }
 
+.Title--sizeY-compact.Title--level-2 {
+  font-size: var(
+    --vkui--font_title2--font_size--compact,
+    var(--vkui--font_title2--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title2--line_height--compact,
+    var(--vkui--font_title2--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title2--font_weight--compact,
+    var(--vkui--font_title2--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title2--font_family--compact,
+    var(--vkui--font_title2--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-2 {
+    font-size: var(
+      --vkui--font_title2--font_size--compact,
+      var(--vkui--font_title2--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title2--line_height--compact,
+      var(--vkui--font_title2--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title2--font_weight--compact,
+      var(--vkui--font_title2--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title2--font_family--compact,
+      var(--vkui--font_title2--font_family--regular)
+    );
+  }
+}
+
 .Title--level-3 {
   font-size: var(--vkui--font_title3--font_size--regular);
   line-height: var(--vkui--font_title3--line_height--regular);
   font-weight: var(--vkui--font_title3--font_weight--regular);
   font-family: var(--vkui--font_title3--font_family--regular);
 }
+
+.Title--sizeY-compact.Title--level-3 {
+  font-size: var(
+    --vkui--font_title3--font_size--compact,
+    var(--vkui--font_title3--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title3--line_height--compact,
+    var(--vkui--font_title3--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title3--font_weight--compact,
+    var(--vkui--font_title3--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title3--font_family--compact,
+    var(--vkui--font_title3--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-3 {
+    font-size: var(
+      --vkui--font_title3--font_size--compact,
+      var(--vkui--font_title3--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title3--line_height--compact,
+      var(--vkui--font_title3--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title3--font_weight--compact,
+      var(--vkui--font_title3--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title3--font_family--compact,
+      var(--vkui--font_title3--font_family--regular)
+    );
+  }
+}

package/src/components/Typography/Title/Title.tsx

@@ -1,5 +1,6 @@
 import { classNames } from '@vkontakte/vkjs';
-import { Typography, TypographyProps } from '../Typography';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { Typography, type TypographyProps } from '../Typography';
 import styles from './Title.module.css';
 
 const stylesLevel = {
@@ -8,6 +9,11 @@ const stylesLevel = {
   '3': styles['Title--level-3'],
 };
 
+const sizeYClassNames = {
+  none: styles['Title--sizeY-none'],
+  compact: styles['Title--sizeY-compact'],
+};
+
 export interface TitleProps extends TypographyProps {
   level?: '1' | '2' | '3';
 }
@@ -25,12 +31,18 @@ export const Title = ({
   inline = false,
   ...restProps
 }: TitleProps): React.ReactNode => {
+  const { sizeY = 'none' } = useAdaptivity();
+
   return (
     <Typography
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(className, stylesLevel[level])}
+      className={classNames(
+        className,
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        stylesLevel[level],
+      )}
       {...restProps}
     />
   );

package/src/components/Typography/Typography.module.css

@@ -9,19 +9,36 @@
 }
 
 /* Мы утяжеляем селектор, чтобы перебить другие селекторы */
-.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
+.Typography--weight-1.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
+  font-weight: var(--vkui--font_weight_base1);
+}
+
+.Typography--accent.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
   font-weight: var(--vkui--font_weight_accent1);
 }
 
-.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
+.Typography--weight-2.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
+  font-weight: var(--vkui--font_weight_base2);
+}
+
+.Typography--accent.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
   font-weight: var(--vkui--font_weight_accent2);
 }
 
-.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
+.Typography--weight-3.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
+  font-weight: var(--vkui--font_weight_base3);
+}
+
+.Typography--accent.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
 
 /* stylelint-disable-next-line selector-max-type */
 .Typography b {
+  font-weight: var(--vkui--font_weight_base1);
+}
+
+/* stylelint-disable-next-line selector-max-type */
+.Typography--accent.Typography b {
   font-weight: var(--vkui--font_weight_accent1);
 }

package/src/components/Typography/Typography.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasComponent, HasRootRef } from '../../types';
+import type { HasComponent, HasRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Typography.module.css';
 
@@ -22,6 +22,12 @@ export interface TypographyProps
    * Задаёт начертание шрифта, отличное от стандартного.
    */
   weight?: '1' | '2' | '3';
+  /**
+   * Включает акцентный тип начертания шрифта.
+   * Используются токены fontWeightAccent[1, 2, 3]
+   * Используется только вместе с `weight`
+   */
+  useAccentWeight?: boolean;
   /**
    * Убирает внешние отступы
    */
@@ -34,6 +40,9 @@ export interface TypographyProps
 
 export const Typography = ({
   weight,
+
+  // TODO [>=7]: сделать по умолчанию false (нужен будет кодмод)
+  useAccentWeight = true,
   Component = 'span',
   normalize,
   inline,
@@ -46,6 +55,7 @@ export const Typography = ({
       normalize && styles['Typography--normalize'],
       inline && styles['Typography--inline'],
       weight && stylesWeight[weight],
+      weight && useAccentWeight && styles['Typography--accent'],
     )}
     {...restProps}
   />

package/src/components/UnstyledTextField/UnstyledTextField.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasRootRef } from '../../types';
+import type { HasRootRef } from '../../types';
 import { Text } from '../Typography/Text/Text';
 import styles from './UnstyledTextField.module.css';
 

package/src/components/UsersStack/UsersStack.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 { RootComponent } from '../RootComponent/RootComponent';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';

package/src/components/View/View.tsx

@@ -3,16 +3,16 @@ import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
 import { blurActiveElement, useDOM } from '../../lib/dom';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 import { useScroll } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { NavViewIdContext } from '../NavIdContext/NavIdContext';
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
 import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
 import { useSplitCol } from '../SplitCol/SplitColContext';
-import { Touch, TouchEvent } from '../Touch/Touch';
+import { type CustomTouchEvent, Touch } from '../Touch/Touch';
 import { useLayoutEffectCall } from './useLayoutEffectCall';
 import {
   getSwipeBackPredicates,
@@ -186,7 +186,7 @@ export const View = ({
     }
   }, [onSwipeBackCancel, onSwipeBackSuccess, swipeBackResult]);
 
-  const handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = (event: TouchEvent) => {
+  const handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = (event: CustomTouchEvent) => {
     if (browserSwipe) {
       return;
     }
@@ -198,7 +198,7 @@ export const View = ({
     }
   };
 
-  const handleTouchMoveXForIOSSwipeBackSimulation = (event: TouchEvent) => {
+  const handleTouchMoveXForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     if (swipeBackPrevented.current || swipeBackExcluded(event)) {
       return;
     }
@@ -259,7 +259,7 @@ export const View = ({
     }
   };
 
-  const handleTouchEndForIOSSwipeBackSimulation = (event: TouchEvent) => {
+  const handleTouchEndForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     swipeBackPrevented.current = false;
     if (swipingBack) {
       const speed = (swipeBackShift / event.duration) * 1000;