@vkontakte/vkui 7.2.0 → 7.3.0

package/src/components/ImageBase/ImageBase.tsx

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { minOr } from '../../lib/comparing';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { getFetchPriorityProp } from '../../lib/utils';
 import type {
   AnchorHTMLAttributesOnly,
@@ -66,11 +67,11 @@ export interface ImageBaseProps
    */
   size?: LiteralUnion<ImageBaseSize, number>;
   /**
-   * Ширина изображения
+   * Ширина изображения.
    */
   widthSize?: number | string;
   /**
-   * Высота изображения
+   * Высота изображения.
    */
   heightSize?: number | string;
   /**
@@ -98,26 +99,26 @@ export interface ImageBaseProps
   withTransparentBackground?: boolean;
   /**
    * Пользовательское значения стиля object-fit
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
   objectFit?: React.CSSProperties['objectFit'];
   /**
    * Пользовательское значения стиля object-position
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
    */
   objectPosition?: React.CSSProperties['objectPosition'];
   /**
    * Флаг для сохранения пропорций картинки.
-   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
+   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
    */
   keepAspectRatio?: boolean;
   /**
-   * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
+   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
    */
   elementTiming?: string;
   /**
    * Пользовательское значения стиля filter
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
    */
   filter?: React.CSSProperties['filter'];
 }
@@ -329,14 +330,12 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     </ImageBaseContext.Provider>
   );
 };
-
-ImageBase.displayName = 'ImageBase';
-
 ImageBase.Badge = ImageBaseBadge;
-ImageBase.Badge.displayName = 'ImageBase.Badge';
-
 ImageBase.Overlay = ImageBaseOverlay;
-ImageBase.Overlay.displayName = 'ImageBase.Overlay';
-
 ImageBase.FloatElement = ImageBaseFloatElement;
-ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');
+  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');
+  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');
+}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseBadge.module.css"],"names":["host","backgroundStroke","backgroundShadow"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAYAC,kB,WAZA;AAAA,E,aAiBAC,kB,WAjBA;AAAA;AAAA","file":"ImageBaseBadge.module.css.d.ts","sourceRoot":""}

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

@@ -49,12 +49,9 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
 /**
  * Бейдж в правом нижнем углу компонента.
  *
- * > Не используйте при `size < 24`
+ * > Не используйте при `size < 24`.
  */
-export const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({
-  background = 'shadow',
-  ...restProps
-}: ImageBaseBadgeProps) => {
+export const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {
   return (
     <>
       <RootComponent
@@ -67,5 +64,3 @@ export const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({
     </>
   );
 };
-
-ImageBaseBadge.displayName = 'ImageBaseBadge';

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseFloatElement.module.css"],"names":["host","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","hidden","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,iB,WATA;AAAA,E,aAaAC,gB,WAbA;AAAA,E,aAiBAC,e,WAjBA;AAAA,E,aAqBAC,e,WArBA;AAAA,E,aAyBAC,e,WAzBA;AAAA,E,aA6BAC,gB,WA7BA;AAAA,E,aAiCAC,iB,WAjCA;AAAA,E,aAqCAC,iB,WArCA;AAAA,E,aAyCAC,iB,WAzCA;AAAA,E,aA6CAC,gB,WA7CA;AAAA,E,aAiDAC,e,WAjDA;AAAA,E,aAqDAC,c,WArDA;AAAA,E,aAyDAC,c,WAzDA;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aAiEAC,e,WAjEA;AAAA,E,aAqEAC,gB,WArEA;AAAA,E,aAyEAC,gB,WAzEA;AAAA,E,aA6EAC,gB,WA7EA;AAAA,E,aAiFAC,Q,WAjFA;AAAA,E,aAqFAC,mB,WArFA;AAAA,E,aA0FAC,c,WA1FA;AAAA,E,aAgGAC,iB,WAhGA;AAAA,E,aAqGAC,sB,WArGA;AAAA,E,aA0GAC,iB,WA1GA;AAAA,E,aAgHAC,oB,WAhHA;AAAA,E,aAqHAC,sB,WArHA;AAAA,E,aA2HAC,iB,WA3HA;AAAA,E,aAiIAC,oB,WAjIA;AAAA;AAAA","file":"ImageBaseFloatElement.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

@@ -71,22 +71,22 @@ const blockIndentClassNames = {
 
 export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * Позиция компонента относительно родителя
+   * Позиция компонента относительно родителя.
    */
   placement: FloatElementPlacement;
   /**
-   * Отступ компонента от края контейнера по горизонтали
+   * Отступ компонента от края контейнера по горизонтали.
    */
   inlineIndent?: FloatElementIndentation;
   /**
-   * Отступ компонента от края контейнера по вертикали
+   * Отступ компонента от края контейнера по вертикали.
    */
   blockIndent?: FloatElementIndentation;
   /**
    * Режим отображения компонента:
    *
    * - `"always"`: Всегда
-   * - `"on-hover"`: При наведении на картинку
+   * - `"on-hover"`: При наведении на картинку.
    */
   visibility?: 'always' | 'on-hover';
 }
@@ -164,5 +164,3 @@ export const ImageBaseFloatElement = ({
     />
   );
 };
-
-ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseOverlay.module.css"],"names":["host","visible","clickable","themeLight","themeDark"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAkBAC,S,WAlBA;AAAA,E,aAuBED,M,WAvBF;AAAA,E,aA4BAE,W,WA5BA;AAAA,E,aAgCAC,Y,WAhCA;AAAA,E,aAqCAC,W,WArCA;AAAA;AAAA","file":"ImageBaseOverlay.module.css.d.ts","sourceRoot":""}

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

@@ -87,7 +87,7 @@ const ImageBaseOverlayNonInteractive = ({
 /**
  * Оверлей над картинкой.
  */
-export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
+export const ImageBaseOverlay = ({
   className,
   theme: themeProp,
   visibility: visibilityProp,
@@ -119,5 +119,3 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
 
   return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;
 };
-
-ImageBaseOverlay.displayName = 'ImageBaseOverlay';

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

@@ -24,6 +24,9 @@ export interface ImageBaseOverlayCommonProps
    * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
    */
   visibility?: 'on-hover' | 'always';
+  /**
+   * `className` для компонента.
+   */
   className?: string;
 }
 
@@ -53,5 +56,8 @@ export interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCom
    * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.
    */
   onClick?: undefined;
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }

package/src/components/ImageBase/helpers.ts

@@ -1,7 +1,7 @@
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {
   if (imageSize <= 20) {
@@ -26,7 +26,7 @@ getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {
   if (imageSize <= 36) {
@@ -47,7 +47,7 @@ getBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getOverlayIconSizeByImageBaseSize(
   imageSize: number,

package/src/components/ImageBase/types.ts

@@ -3,13 +3,31 @@ export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 8
 export type ImageBaseSize = (typeof imageBaseSizes)[number];
 
 export type ImageBaseExpectedIconProps = {
+  /**
+   * Ширина иконки.
+   */
   width?: number;
+  /**
+   * Высота иконки.
+   */
   height?: number;
+  /**
+   * ClassName для иконки.
+   */
   className?: string;
 };
 
 export interface ImageBaseContextProps {
+  /**
+   * Размер картинки.
+   */
   size: ImageBaseSize | number;
+  /**
+   * Обработчики события `mouseOver`.
+   */
   onMouseOverHandlers: VoidFunction[];
+  /**
+   * Обработчики события `mouseOut`.
+   */
   onMouseOutHandlers: VoidFunction[];
 }

package/src/components/ImageBase/validators.ts

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import type * as React from 'react';
 import { warnOnce } from '../../lib/warnOnce';
 import {
@@ -9,11 +11,10 @@ import { imageBaseSizes } from './types';
 
 /**
  * Пример,
- *
  * Icon28User -> 28
  * Icon12Circle1 -> 12
  * Icon12Circle2 -> 12
- * Icon20TextHeading1Outline -> 20
+ * Icon20TextHeading1Outline -> 20.
  */
 function parseIconSizeByDisplayName(displayName: unknown): number | null {
   if (typeof displayName !== 'string') {
@@ -34,7 +35,7 @@ function parseIconSizeByWidthProp(width: unknown): number | null {
 }
 
 function getElementDisplayName(element: React.JSX.Element): string | null {
-  return element.type.displayName ?? null;
+  return element.type.displayName ?? element.type.name ?? null;
 }
 
 function getElementWidthProp(element: React.JSX.Element): number | string | null {

package/src/components/InfoRow/InfoRow.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./InfoRow.module.css"],"names":["host","header"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,Q,WANA;AAAA;AAAA","file":"InfoRow.module.css.d.ts","sourceRoot":""}

package/src/components/InfoRow/InfoRow.tsx

@@ -7,6 +7,9 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './InfoRow.module.css';
 
 export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Элемент, отображаемый над содержимым.
+   */
   header: React.ReactNode;
 }
 

package/src/components/Input/Input.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Input.module.css"],"names":["host","alignCenter","el","alignRight","sizeYCompact","sizeYNone","hasBefore","hasAfter"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,a,WANA;AAAA,E,aAMaC,I,WANb;AAAA,E,aAUAC,Y,WAVA;AAAA,E,aAUYD,I,WAVZ;AAAA,E,aAcAA,I,WAdA;AAAA,E,aA0BAE,c,WA1BA;AAAA,E,aA0BcF,I,WA1Bd;AAAA,E,aA+BEG,W,WA/BF;AAAA,E,aA+BaH,I,WA/Bb;AAAA,E,aAoCAI,W,WApCA;AAAA,E,aAoCWJ,I,WApCX;AAAA,E,aAwCAK,U,WAxCA;AAAA,E,aAwCUL,I,WAxCV;AAAA,E,aA4CAA,I,WA5CA;AAAA,E,aAkDAA,I,WAlDA;AAAA;AAAA","file":"Input.module.css.d.ts","sourceRoot":""}

package/src/components/InputLike/InputLike.module.css

@@ -28,6 +28,6 @@
   letter-spacing: 1px !important;
 }
 
-.full + .divider {
+.host + .divider {
   color: var(--vkui--color_text_primary);
 }

package/src/components/InputLike/InputLike.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./InputLike.module.css"],"names":["mask","lastCharacter","divider","host"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAKAA,M,WALA;AAAA,E,aAeAA,M,WAfA;AAAA,E,aAmBAC,e,WAnBA;AAAA,E,aAwBAC,S,WAxBA;AAAA,E,aA8BAC,M,WA9BA;AAAA,E,aA8BQD,S,WA9BR;AAAA;AAAA","file":"InputLike.module.css.d.ts","sourceRoot":""}

package/src/components/InputLike/InputLike.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import { callMultiple } from '../../lib/callMultiple';
@@ -29,7 +30,7 @@ function getMaskElements(length: number) {
   return result;
 }
 
-export const InputLike: React.FC<InputLikeProps> = ({
+export const InputLike = ({
   value,
   length,
   index,
@@ -50,10 +51,10 @@ export const InputLike: React.FC<InputLikeProps> = ({
   return (
     <RootComponent
       Component="span"
-      baseClassName={value?.length === length ? styles.full : undefined}
+      baseClassName={value?.length === length ? styles.host : undefined}
       tabIndex={0}
-      onClick={callMultiple(onClick, handleElementSelect)}
-      onFocus={callMultiple(stopPropagation, onFocus)}
+      onClick={onClick}
+      onFocus={callMultiple(onFocus, handleElementSelect)}
       {...restProps}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}
@@ -67,5 +68,3 @@ export const InputLike: React.FC<InputLikeProps> = ({
     </RootComponent>
   );
 };
-
-InputLike.displayName = 'InputLike';

package/src/components/Link/Link.module.css

@@ -13,10 +13,8 @@
   border-radius: 0;
 }
 
-@media (--hover-has) {
-  .withUnderline:hover {
-    text-decoration: underline;
-  }
+.withUnderline.hover {
+  text-decoration: underline;
 }
 
 .hasVisited:visited {

package/src/components/Link/Link.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Link.module.css"],"names":["host","withUnderline","hover","hasVisited","before","after"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAeAC,e,WAfA;AAAA,E,aAecC,O,WAfd;AAAA,E,aAmBAC,Y,WAnBA;AAAA,E,aAuBAC,Q,WAvBA;AAAA,E,aAwBAC,O,WAxBA;AAAA,E,aA6BAD,Q,WA7BA;AAAA,E,aAiCAC,O,WAjCA;AAAA;AAAA","file":"Link.module.css.d.ts","sourceRoot":""}

package/src/components/Link/Link.tsx

@@ -38,17 +38,15 @@ export const Link = ({
 
   return (
     <Tappable
-      Component={restProps.href ? 'a' : 'button'}
+      activeMode="opacity"
+      hoverMode={styles.hover}
+      focusVisibleMode="outside"
       {...restProps}
       baseClassName={classNames(
         styles.host,
         hasVisited && styles.hasVisited,
-        noUnderline ? undefined : styles.withUnderline,
+        !noUnderline && styles.withUnderline,
       )}
-      hasHover={false}
-      activeMode="opacity"
-      hoverMode="none"
-      focusVisibleMode="outside"
     >
       {before}
       {children}

package/src/components/List/List.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./List.module.css"],"names":["host","placeholder"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAKAC,a,WALA;AAAA;AAAA","file":"List.module.css.d.ts","sourceRoot":""}

package/src/components/List/List.tsx

@@ -6,7 +6,7 @@ import styles from './List.module.css';
 
 export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
   /**
-   * Задает отступ между элементами
+   * Задает отступ между элементами.
    */
   gap?: number;
 };

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -4,15 +4,18 @@ import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride
 
 export interface LocaleProviderProps {
   /**
-   * Строка с языковой меткой BCP 47
+   * Строка с языковой меткой BCP 47.
    */
   value: ConfigProviderContextInterface['locale'];
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }
 
 /**
  * Компонент, прокидывающий локаль. Список можно найти в
- * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+ * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
  *
  * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider

package/src/components/Mark/Mark.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Mark.module.css"],"names":["host"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA;AAAA","file":"Mark.module.css.d.ts","sourceRoot":""}

package/src/components/MiniInfoCell/MiniInfoCell.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./MiniInfoCell.module.css"],"names":["host","modeAccent","before","middle","content","textWrapShort","textWrapFull","textWrapNowrap","after","modeAdd","modeMore"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,Y,WAPA;AAAA,E,aAWAC,Q,WAXA;AAAA,E,aAgBAC,Q,WAhBA;AAAA,E,aAwBAC,S,WAxBA;AAAA,E,aAiCAC,e,WAjCA;AAAA,E,aAiCeD,S,WAjCf;AAAA,E,aAyCAE,c,WAzCA;AAAA,E,aAyCcF,S,WAzCd;AAAA,E,aA8CAG,gB,WA9CA;AAAA,E,aA8CgBH,S,WA9ChB;AAAA,E,aAkDAI,O,WAlDA;AAAA,E,aAuDAC,S,WAvDA;AAAA,E,aAwDAC,U,WAxDA;AAAA,E,aA4DAD,S,WA5DA;AAAA,E,aA4DSP,Q,WA5DT;AAAA,E,aA6DAQ,U,WA7DA;AAAA,E,aA6DUR,Q,WA7DV;AAAA,E,aAiEAQ,U,WAjEA;AAAA,E,aAsEAP,Q,WAtEA;AAAA,E,aA4EAM,S,WA5EA;AAAA,E,aA4ESN,Q,WA5ET;AAAA,E,aA8EAO,U,WA9EA;AAAA,E,aA8EUP,Q,WA9EV;AAAA;AAAA","file":"MiniInfoCell.module.css.d.ts","sourceRoot":""}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -28,7 +28,7 @@ export interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElem
 
   /**
    * Содержимое справа.<br />
-   * `<UsersStack size="s" />` или `<Avatar size={24} />`
+   * `<UsersStack size="s" />` или `<Avatar size={24} />`.
    */
   after?: React.ReactNode;
 
@@ -47,12 +47,12 @@ export interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElem
    *
    * - `nowrap` – в одну строку, текст не переносится и обрезается.
    * - `short` – максимально отображается 3 строки, остальное обрезается.
-   * - `full` – текст отображается полностью. В дизайне это свойство `multiline`
+   * - `full` – текст отображается полностью. В дизайне это свойство `multiline`.
    */
   textWrap?: 'nowrap' | 'short' | 'full';
 
   /**
-   * Передавать `true`, если предполагается переход при клике по ячейке.
+   * Передавать `true`, если предполагается переход при нажатии на ячейку.
    */
   chevron?: boolean;
 }

package/src/components/ModalCard/ModalCard.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ModalCard.module.css"],"names":["host","hostMaxWidthS","hostMaxWidthM","hostMaxWidthL","hostMobile","hostStateEnter","hostStateEntering","hostStateExiting","hostStateExited","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAA,M,WANA;AAAA,E,aAUAC,e,WAVA;AAAA,E,aAcAC,e,WAdA;AAAA,E,aAkBAC,e,WAlBA;AAAA,E,aAuBAC,Y,WAvBA;AAAA,E,aAoCAA,Y,WApCA;AAAA,E,aAoCWC,gB,WApCX;AAAA,E,aAyCAD,Y,WAzCA;AAAA,E,aAyCWE,mB,WAzCX;AAAA,E,aA6CAF,Y,WA7CA;AAAA,E,aA6CWG,kB,WA7CX;AAAA,E,aAkDAH,Y,WAlDA;AAAA,E,aAkDWI,iB,WAlDX;AAAA,E,aAwDAC,a,WAxDA;AAAA,E,aA+DAA,a,WA/DA;AAAA,E,aA+DYJ,gB,WA/DZ;AAAA,E,aAoEAI,a,WApEA;AAAA,E,aAoEYH,mB,WApEZ;AAAA,E,aAwEAG,a,WAxEA;AAAA,E,aAwEYF,kB,WAxEZ;AAAA,E,aA4EAE,a,WA5EA;AAAA,E,aA4EYD,iB,WA5EZ;AAAA;AAAA","file":"ModalCard.module.css.d.ts","sourceRoot":""}

package/src/components/ModalCard/ModalCard.tsx

@@ -1,15 +1,10 @@
 'use client';
 
-import { useId } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
 import { useModalManager } from '../ModalRoot/useModalManager';
 import { ModalCardInternal } from './ModalCardInternal';
 import type { ModalCardProps } from './types';
 
-const warn = warnOnce('ModalCard');
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
@@ -26,15 +21,13 @@ export const ModalCard = ({
   keepMounted = false,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
-  const generatingId = useId();
-  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
-
   const {
     mounted,
     shouldPreserveSnapPoint: excludedProp,
+    id,
     ...resolvedProps
   } = useModalManager({
-    id,
+    id: nav || idProp,
     open,
     keepMounted,
     modalOverlayTestId,

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';

package/src/components/ModalCard/types.ts

@@ -53,7 +53,7 @@ export interface ModalCardProps
   /**
    * Позволяет отключить захват фокуса.
    *
-   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали
+   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали.
    */
   disableFocusTrap?: UseFocusTrapProps['disabled'];
 }

package/src/components/ModalCardBase/ModalCardBase.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ModalCardBase.module.css"],"names":["container","withSafeZone","containerSoftwareKeyboardOpened","title","description","icon","actions","dismiss","ios","desktop"],"mappings":"AAAA;AAAA,E,aAAAA,W,WAAA;AAAA,E,aAmBAC,c,WAnBA;AAAA,E,aAmBcD,W,WAnBd;AAAA,E,aA0BAE,iC,WA1BA;AAAA,E,aA8BAC,O,WA9BA;AAAA,E,aA+BAC,a,WA/BA;AAAA,E,aAuCAD,O,WAvCA;AAAA,E,aA2CAC,a,WA3CA;AAAA,E,aA+CAC,M,WA/CA;AAAA,E,aAqDAC,S,WArDA;AAAA,E,aAyDAC,S,WAzDA;AAAA,E,aAoEAC,K,WApEA;AAAA,E,aAoEKR,W,WApEL;AAAA,E,aA+EAS,S,WA/EA;AAAA,E,aA+ESF,S,WA/ET;AAAA,E,aAoFAE,S,WApFA;AAAA,E,aAoFST,W,WApFT;AAAA,E,aA0FAS,S,WA1FA;AAAA,E,aA0FQD,K,WA1FR;AAAA,E,aA0FaR,W,WA1Fb;AAAA,E,aA+FAC,c,WA/FA;AAAA,E,aA+FaQ,S,WA/Fb;AAAA,E,aA+FsBT,W,WA/FtB;AAAA;AAAA","file":"ModalCardBase.module.css.d.ts","sourceRoot":""}

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -22,43 +22,51 @@ export interface ModalCardBaseProps
   /**
    * Иконка.
    *
-   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src="" />`
+   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src="" />`.
    */
   icon?: React.ReactNode;
 
   /**
-   * Заголовок карточки
+   * Заголовок карточки.
    */
   title?: React.ReactNode;
-  /* Позволяет поменять тег используемый для заголовка */
+  /**
+   * Позволяет поменять тег используемый для заголовка.
+   */
   titleComponent?: React.ElementType;
-  /* Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title */
+  /**
+   * Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title.
+   */
   titleId?: string;
 
   /**
-   * Описание
+   * Описание.
    */
   description?: React.ReactNode;
-  /* Позволяет поменять тег используемый для описания */
+  /**
+   * Позволяет поменять тег используемый для описания.
+   */
   descriptionComponent?: React.ElementType;
 
   /**
    * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:
    *
    * - `size="l" mode="primary" stretched`
-   * - `size="l" mode="secondary" stretched`
+   * - `size="l" mode="secondary" stretched`.
    *
    * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:
    *
    * - `gap="s" mode="horizontal" stretched`
-   * - `gap="m" mode="vertical" stretched`
+   * - `gap="m" mode="vertical" stretched`.
    */
   actions?: React.ReactNode;
-
+  /**
+   * Обработчик закрытия модального окна.
+   */
   onClose?: VoidFunction;
 
   /**
-   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий
+   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.
    */
   dismissLabel?: string;
 
@@ -68,29 +76,29 @@ export interface ModalCardBaseProps
   size?: number;
 
   /**
-   * Передает атрибут `data-testid` для кнопки закрытия
+   * Передает атрибут `data-testid` для кнопки закрытия.
    */
   modalDismissButtonTestId?: string;
   /**
-   * Расположение кнопки закрытия (внутри и вне `popout'a`)
+   * Расположение кнопки закрытия (внутри и вне `popout'a`).
    *
-   * Доступно только в `compact`-режиме
+   * Доступно только в `compact`-режиме.
    *
-   * На `iOS` в `regular`-режиме всегда включен `inside`
+   * На `iOS` в `regular`-режиме всегда включен `inside`.
    *
-   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте
+   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте.
    */
   dismissButtonMode?: 'inside' | 'outside' | 'none';
   /**
-   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
+   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, нажатие на подложку).
    *
-   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
+   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте.
    */
   preventClose?: boolean;
   /**
    * Управляющие элементы под кнопкой закрытия.
    *
-   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton
+   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton.
    *
    */
   outsideButtons?: React.ReactNode;

package/src/components/ModalDismissButton/ModalDismissButton.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ModalDismissButton.module.css"],"names":["host"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA;AAAA","file":"ModalDismissButton.module.css.d.ts","sourceRoot":""}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -9,6 +9,9 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalDismissButton.module.css';
 
 export interface ModalDismissButtonProps extends Omit<ModalOutsideButtonProps, 'children'> {
+  /**
+   * Содержимое кнопки.
+   */
   children?: React.ReactNode;
 }
 

package/src/components/ModalOutlet/ModalOutlet.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ModalOutlet.module.css"],"names":["host","hostDesktop"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,a,WATA;AAAA;AAAA","file":"ModalOutlet.module.css.d.ts","sourceRoot":""}

package/src/components/ModalOutlet/ModalOutlet.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import { classNames } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import styles from './ModalOutlet.module.css';

package/src/components/ModalOutsideButton/ModalOutsideButton.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ModalOutsideButton.module.css"],"names":["host","hover","active"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAA,M,WARA;AAAA,E,aAmBAA,M,WAnBA;AAAA,E,aAuBAC,O,WAvBA;AAAA,E,aA2BAC,Q,WA3BA;AAAA;AAAA","file":"ModalOutsideButton.module.css.d.ts","sourceRoot":""}