@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/Image/Image.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';
+import styles from './Image.module.css';
 
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
 
@@ -11,6 +13,22 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
    * Размер закругления.
    */
   borderRadius?: 's' | 'l' | 'm';
+  /**
+   * Размер закругления угла между сторонами начала блока и строки
+   */
+  borderStartStartRadius?: 's' | 'l' | 'm';
+  /**
+   * Размер закругления угла между стороной начала блока и стороной конца строки
+   */
+  borderStartEndRadius?: 's' | 'l' | 'm';
+  /**
+   * Размер закругления угла между стороной конца блока и стороной начала строки
+   */
+  borderEndStartRadius?: 's' | 'l' | 'm';
+  /**
+   * Размер закругления угла между сторонами конца блока и строки
+   */
+  borderEndEndRadius?: 's' | 'l' | 'm';
 }
 
 const getBorderRadiusBySize = (
@@ -69,27 +87,79 @@ const getBorderRadiusBySize = (
   }
 };
 
+const getBorderRadiusBySizeInPx = (
+  size: Exclude<ImageBaseProps['size'], undefined>,
+  borderRadius: ImageProps['borderRadius'],
+) => {
+  if (!borderRadius) {
+    return undefined;
+  }
+
+  return `${getBorderRadiusBySize(size, borderRadius)}px`;
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Image
  */
-export const Image = ({
+export const Image: React.FC<ImageProps> & {
+  Badge: typeof ImageBadge;
+  Overlay: typeof ImageBase.Overlay;
+} = ({
   size = IMAGE_DEFAULT_SIZE,
-  borderRadius: borderRadiusProp = 'm',
+  borderRadius = 'm',
+  borderStartStartRadius,
+  borderStartEndRadius,
+  borderEndStartRadius,
+  borderEndEndRadius,
   style,
   className,
+  objectFit = 'cover',
   ...restProps
 }: ImageProps) => {
-  const borderRadius = React.useMemo(
-    () => getBorderRadiusBySize(size, borderRadiusProp),
-    [size, borderRadiusProp],
+  const borderStyles = React.useMemo(
+    () => ({
+      '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),
+      '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(
+        size,
+        borderStartStartRadius,
+      ),
+      '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(
+        size,
+        borderStartEndRadius,
+      ),
+      '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(
+        size,
+        borderEndStartRadius,
+      ),
+      '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(
+        size,
+        borderEndEndRadius,
+      ),
+    }),
+    [
+      borderRadius,
+      borderStartStartRadius,
+      borderStartEndRadius,
+      borderEndStartRadius,
+      borderEndEndRadius,
+      size,
+    ],
   );
 
   return (
     <ImageBase
       {...restProps}
+      objectFit={objectFit}
       size={size}
-      style={{ ...style, borderRadius }}
-      className={className}
+      style={{ ...borderStyles, ...style }}
+      className={classNames(
+        className,
+        styles['Image'],
+        borderStartStartRadius && styles['Image--borderStartStartRadius'],
+        borderStartEndRadius && styles['Image--borderStartEndRadius'],
+        borderEndStartRadius && styles['Image--borderEndStartRadius'],
+        borderEndEndRadius && styles['Image--borderEndEndRadius'],
+      )}
     />
   );
 };

package/src/components/Image/ImageBadge/ImageBadge.tsx

@@ -5,7 +5,10 @@ import styles from './ImageBadge.module.css';
 
 export type ImageBadgeProps = ImageBaseBadgeProps;
 
-export const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {
+export const ImageBadge: React.FC<ImageBadgeProps> = ({
+  className,
+  ...restProps
+}: ImageBadgeProps) => {
   const { size } = React.useContext(ImageBaseContext);
   return (
     <ImageBase.Badge

package/src/components/ImageBase/ImageBase.module.css

@@ -40,10 +40,30 @@
   block-size: 100%;
   border: 0;
   border-radius: inherit;
-  object-fit: cover;
   visibility: hidden;
 }
 
+.ImageBase__img--keepRatio {
+  inline-size: auto;
+  block-size: auto;
+}
+
+.ImageBase__img--objectFit-contain {
+  object-fit: contain;
+}
+
+.ImageBase__img--objectFit-cover {
+  object-fit: cover;
+}
+
+.ImageBase__img--objectFit-none {
+  object-fit: none;
+}
+
+.ImageBase__img--objectFit-scaleDown {
+  object-fit: scale-down;
+}
+
 .ImageBase--loaded .ImageBase__img {
   visibility: visible;
 }

package/src/components/ImageBase/ImageBase.tsx

@@ -49,11 +49,11 @@ export interface ImageBaseProps
   /**
    * Ширина изображения
    */
-  widthSize?: number;
+  widthSize?: number | string;
   /**
    * Высота изображения
    */
-  heightSize?: number;
+  heightSize?: number | string;
   /**
    * Отключает обводку.
    */
@@ -77,12 +77,53 @@ export interface ImageBaseProps
    * @since 5.10.0
    */
   withTransparentBackground?: boolean;
+  /**
+   * Пользовательское значения стиля object-fit
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+   */
+  objectFit?: React.CSSProperties['objectFit'];
+  /**
+   * Флаг для сохранения пропорций картинки.
+   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
+   */
+  keepAspectRatio?: boolean;
 }
 
+const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {
+  switch (objectFit) {
+    case 'contain':
+      return styles['ImageBase__img--objectFit-contain'];
+    case 'cover':
+      return styles['ImageBase__img--objectFit-cover'];
+    case 'none':
+      return styles['ImageBase__img--objectFit-none'];
+    case 'scale-down':
+      return styles['ImageBase__img--objectFit-scaleDown'];
+  }
+  return undefined;
+};
+
+const parsePx = (value: string): number | undefined => {
+  if (value.endsWith('px')) {
+    return parseInt(value);
+  }
+  return undefined;
+};
+
+const sizeToNumber = (size: number | string | undefined): number | undefined => {
+  if (typeof size === 'string') {
+    return parsePx(size);
+  }
+  return size;
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
-export const ImageBase = ({
+export const ImageBase: React.FC<ImageBaseProps> & {
+  Badge: typeof ImageBaseBadge;
+  Overlay: typeof ImageBaseOverlay;
+} = ({
   alt,
   crossOrigin,
   decoding,
@@ -106,12 +147,14 @@ export const ImageBase = ({
   onLoad,
   onError,
   withTransparentBackground,
+  objectFit = 'cover',
+  keepAspectRatio = false,
   ...restProps
 }: ImageBaseProps) => {
-  const size = sizeProp ?? minOr([widthSize, heightSize], defaultSize);
+  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);
 
-  const width = widthSize ?? size;
-  const height = heightSize ?? size;
+  const width = widthSize ?? (keepAspectRatio ? undefined : size);
+  const height = heightSize ?? (keepAspectRatio ? undefined : size);
 
   const [loaded, setLoaded] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
@@ -176,11 +219,23 @@ export const ImageBase = ({
           <img
             ref={imgRef}
             alt={alt}
-            className={styles['ImageBase__img']}
+            className={classNames(
+              styles['ImageBase__img'],
+              getObjectFitClassName(objectFit),
+              keepAspectRatio && styles['ImageBase__img--keepRatio'],
+            )}
             crossOrigin={crossOrigin}
             decoding={decoding}
             loading={loading}
             referrerPolicy={referrerPolicy}
+            style={
+              keepAspectRatio
+                ? {
+                    width: widthImg || width,
+                    height: heightImg || height,
+                  }
+                : undefined
+            }
             sizes={sizes}
             src={src}
             srcSet={srcSet}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx

@@ -7,6 +7,16 @@ import type { ImageBaseExpectedIconProps } from '../types';
 import { validateBadgeIcon } from '../validators';
 import styles from './ImageBaseBadge.module.css';
 
+function DevelopmentCheck({ children }: Pick<ImageBaseBadgeProps, 'children'>) {
+  const { size } = React.useContext(ImageBaseContext);
+
+  if (children) {
+    validateBadgeIcon(size, { name: 'children', value: children });
+  }
+
+  return null;
+}
+
 const backgroundStyles = {
   stroke: styles['ImageBaseBadge--background-stroke'],
   shadow: styles['ImageBaseBadge--background-shadow'],
@@ -39,20 +49,20 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
  *
  * > Не используйте при `size < 24`
  */
-export const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {
-  if (process.env.NODE_ENV === 'development') {
-    if (restProps.children) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { size } = React.useContext(ImageBaseContext);
-      validateBadgeIcon(size, { name: 'children', value: restProps.children });
-    }
-  }
-
+export const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({
+  background = 'shadow',
+  ...restProps
+}: ImageBaseBadgeProps) => {
   return (
-    <RootComponent
-      {...restProps}
-      baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}
-    />
+    <>
+      <RootComponent
+        {...restProps}
+        baseClassName={classNames(styles['ImageBaseBadge'], backgroundStyles[background])}
+      />
+      {process.env.NODE_ENV === 'development' && (
+        <DevelopmentCheck>{restProps.children}</DevelopmentCheck>
+      )}
+    </>
   );
 };
 

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx

@@ -15,6 +15,18 @@ import type {
 } from './types';
 import styles from './ImageBaseOverlay.module.css';
 
+function DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {
+  const { size } = React.useContext(ImageBaseContext);
+
+  if (process.env.NODE_ENV === 'development') {
+    if (children) {
+      validateOverlayIcon(size, { name: 'children', value: children });
+    }
+  }
+
+  return null;
+}
+
 export type ImageBaseOverlayProps =
   | ImageBaseOverlayInteractiveProps
   | ImageBaseOverlayNonInteractiveProps;
@@ -31,31 +43,26 @@ const ImageBaseOverlayInteractive = ({
   const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });
   const keyboardHandlers = useKeyboard();
 
-  if (process.env.NODE_ENV === 'development') {
-    if (children) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const { size } = React.useContext(ImageBaseContext);
-      validateOverlayIcon(size, { name: 'children', value: children });
-    }
-  }
-
   return (
-    <div
-      {...restProps}
-      tabIndex={0}
-      role="button"
-      className={classNames(
-        styles['ImageBaseOverlay--clickable'],
-        (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],
-        focusVisibleClassNames,
-        className,
-      )}
-      ref={getRootRef}
-      {...focusEvents}
-      {...keyboardHandlers}
-    >
-      {children}
-    </div>
+    <>
+      <div
+        {...restProps}
+        tabIndex={0}
+        role="button"
+        className={classNames(
+          styles['ImageBaseOverlay--clickable'],
+          (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],
+          focusVisibleClassNames,
+          className,
+        )}
+        ref={getRootRef}
+        {...focusEvents}
+        {...keyboardHandlers}
+      >
+        {children}
+      </div>
+      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}
+    </>
   );
 };
 

package/src/components/ImageBase/context.ts

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

package/src/components/ImageBase/helpers.ts

@@ -17,8 +17,11 @@ export function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 |
   }
   return getFallbackIconSizeByImageBaseSize.MAX_SIZE;
 }
+export declare namespace getFallbackIconSizeByImageBaseSize {
+  export let MAX_SIZE: 36;
+}
 
-getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36 as const;
+getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;
 
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
@@ -35,6 +38,9 @@ export function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20
   }
   return getBadgeIconSizeByImageBaseSize.MAX_SIZE;
 }
+export declare namespace getBadgeIconSizeByImageBaseSize {
+  export let MAX_SIZE: 24;
+}
 
 getBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;
 
@@ -61,5 +67,8 @@ export function getOverlayIconSizeByImageBaseSize(
   }
   return getOverlayIconSizeByImageBaseSize.MAX_SIZE;
 }
+export declare namespace getOverlayIconSizeByImageBaseSize {
+  export let MAX_SIZE: 32;
+}
 
 getOverlayIconSizeByImageBaseSize.MAX_SIZE = 32 as const;

package/src/components/ImageBase/validators.ts

@@ -85,7 +85,7 @@ function validateIconComponentSizeByImageSize(
 
 const warnImageBase = warnOnce('ImageBase');
 
-export function validateFallbackIcon(imageSize: number, iconProp: IconProp) {
+export function validateFallbackIcon(imageSize: number, iconProp: IconProp): void {
   return validateIconComponentSizeByImageSize(
     imageSize,
     iconProp,

package/src/components/InfoRow/InfoRow.tsx

@@ -13,7 +13,12 @@ export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
-export const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (
+export const InfoRow = ({
+  header,
+  children,
+  className,
+  ...restProps
+}: InfoRowProps): React.ReactNode => (
   <Headline
     {...restProps}
     Component="span"

package/src/components/Input/Input.tsx

@@ -33,7 +33,7 @@ export const Input = ({
   status,
   mode,
   ...restProps
-}: InputProps) => {
+}: InputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   return (

package/src/components/InputLike/InputLike.tsx

@@ -27,7 +27,7 @@ function getMaskElements(length: number) {
   return result;
 }
 
-export const InputLike = ({
+export const InputLike: React.FC<InputLikeProps> = ({
   value,
   length,
   index,

package/src/components/InputLike/InputLikeDivider.tsx

@@ -6,7 +6,7 @@ export const InputLikeDivider = ({
   children,
   className,
   ...props
-}: React.InputHTMLAttributes<HTMLSpanElement>) => {
+}: React.InputHTMLAttributes<HTMLSpanElement>): React.ReactNode => {
   return (
     <span className={classNames(styles['InputLike__divider'], className)} {...props}>
       {children}

package/src/components/Link/Link.tsx

@@ -18,7 +18,7 @@ export const Link = ({
   className,
   onClick = noop,
   ...restProps
-}: LinkProps) => {
+}: LinkProps): React.ReactNode => {
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}

package/src/components/List/List.module.css

@@ -0,0 +1,7 @@
+.List {
+  display: grid;
+}
+
+.List__placeholder {
+  display: none;
+}

package/src/components/List/List.tsx

@@ -1,17 +1,43 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './List.module.css';
 
-export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
+  /**
+   * Задает отступ между элементами
+   */
+  gap?: number;
+};
 
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export const List = ({ children, ...restProps }: ListProps) => {
+export const List = ({
+  children,
+  gap = 0,
+  className,
+  style,
+  ...restProps
+}: ListProps): React.ReactNode => {
   return (
-    <RootComponent role="list" {...restProps}>
+    <RootComponent
+      role="list"
+      className={classNames(styles.List, className)}
+      style={{
+        ...style,
+        gridGap: gap,
+      }}
+      {...restProps}
+    >
       {children}
-      <div aria-hidden {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}></div>
+      <div
+        aria-hidden
+        {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}
+        className={styles['List__placeholder']}
+      ></div>
     </RootComponent>
   );
 };

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -17,6 +17,6 @@ export interface LocaleProviderProps {
  * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */
-export function LocaleProvider({ value, children }: LocaleProviderProps) {
+export function LocaleProvider({ value, children }: LocaleProviderProps): React.ReactNode {
   return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;
 }

package/src/components/Mark/Mark.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Mark.module.css';
@@ -11,6 +12,6 @@ export type MarkProps = HTMLAttributesWithRootRef<HTMLDivElement>;
  * @since 6.1.0
  * @see https://vkcom.github.io/VKUI/#/Mark
  */
-export const Mark = (props: MarkProps) => (
+export const Mark = (props: MarkProps): React.ReactNode => (
   <RootComponent baseClassName={styles['Mark']} Component="mark" {...props} />
 );

package/src/components/MiniInfoCell/MiniInfoCell.module.css

@@ -1,6 +1,6 @@
 .MiniInfoCell {
   display: flex;
-  padding-block: 6px;
+  padding-block: var(--vkui--spacing_size_s);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   color: var(--vkui--color_text_subhead);
 }
@@ -10,7 +10,7 @@
 }
 
 .MiniInfoCell__before {
-  margin-inline-end: 12px;
+  margin-inline-end: var(--vkui--spacing_size_xl);
   color: var(--vkui--color_icon_secondary);
 }
 
@@ -49,8 +49,8 @@
 }
 
 .MiniInfoCell__after {
-  margin-inline-start: 12px;
-  margin-block: -2px;
+  margin-inline-start: var(--vkui--spacing_size_xl);
+  margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
 }
 
 .MiniInfoCell--mode-add,
@@ -69,7 +69,7 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .MiniInfoCell__middle :global(.vkuiIcon) {
-  margin-inline-start: 4px;
+  margin-inline-start: var(--vkui--spacing_size_xs);
   color: var(--vkui--color_text_accent);
 }
 

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -69,7 +69,7 @@ export const MiniInfoCell = ({
   expandable = false,
   className,
   ...restProps
-}: MiniInfoCellProps) => {
+}: MiniInfoCellProps): React.ReactNode => {
   const cellClasses = classNames(
     styles['MiniInfoCell'],
     stylesTextWrap[textWrap],

package/src/components/ModalCard/ModalCard.tsx

@@ -40,7 +40,7 @@ export const ModalCard = ({
   dismissButtonMode,
   dismissLabel,
   ...restProps
-}: ModalCardProps) => {
+}: ModalCardProps): React.ReactNode => {
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const platform = usePlatform();
 

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -100,7 +100,7 @@ export const ModalCardBase = ({
   dismissButtonMode = 'outside',
   preventClose,
   ...restProps
-}: ModalCardBaseProps) => {
+}: ModalCardBaseProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const isSoftwareKeyboardOpened = useKeyboard().isOpened;

package/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -17,7 +18,7 @@ export function ModalCardBaseCloseButton({
   testId,
   mode,
   onClose,
-}: ModalCardBaseCloseButtonProps) {
+}: ModalCardBaseCloseButtonProps): React.ReactNode {
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();