@vkontakte/vkui 7.2.1 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.2.1",
+  "version": "7.3.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -51,7 +51,7 @@
     "copy-essensial-files": "cp ../../LICENSE . && cp ../../README.md .",
     "size": "yarn clear && yarn build:no-types && size-limit",
     "size:ci": "YARN_ENABLE_SCRIPTS=false yarn install --immutable && yarn build:no-types",
-    "build": "yarn clear && yarn run -T concurrently 'yarn:build:*'",
+    "build": "yarn clear && yarn generate && yarn run -T concurrently 'yarn:build:*'",
     "build:types": "yarn run -T concurrently 'yarn:tsc:*'",
     "build:no-types": "yarn run -T concurrently 'yarn:swc:*' 'yarn:postcss'",
     "clear": "yarn run -T shx rm -rf dist/* || yarn run -T shx true",
@@ -71,10 +71,14 @@
     "test:e2e:ci:ui": "yarn run -T cross-env NODE_OPTIONS='--no-warnings' playwright test --ui --ui-port=4300 --ui-host=0.0.0.0 --config playwright-ct.config.mjs",
     "test:e2e:ui": "../../scripts/generate_env_docker.sh -r test:e2e:ci:ui && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
-    "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --jsx react-jsx --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
+    "lint:generated-files": "yarn run -T concurrently 'yarn:lint:generated-files:*'",
+    "lint:generated-files:css-custom-medias": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --jsx react-jsx --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
+    "lint:generated-files:css-modules": "yarn run generate:css-modules",
     "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
     "storybook:build": "yarn run -T cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build",
-    "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs"
+    "generate": "yarn run -T concurrently 'yarn:generate:*'",
+    "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs",
+    "generate:css-modules": "yarn run -T hcm 'src/**/*.css'"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -82,19 +86,19 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.2.0",
-    "@swc/helpers": "^0.5.15",
-    "@vkontakte/icons": "^2.115.0",
+    "@swc/helpers": "^0.5.17",
+    "@vkontakte/icons": "^3.0.0",
     "@vkontakte/vkjs": "^2.0.1",
     "@vkontakte/vkui-floating-ui": "^0.2.3",
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.6.6",
-    "@storybook/react-webpack5": "8.6.6",
+    "@storybook/react": "8.6.12",
+    "@storybook/react-webpack5": "8.6.12",
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.6.6",
+    "storybook": "8.6.12",
     "ts-node": "*"
   },
   "size-limit": [

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./Accordion.module.css"],"names":["icon","host","in","inEnter","inEntered","inExit","inExited"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,M,WAJA;AAAA,E,aAQAC,I,WARA;AAAA,E,aAiBEA,I,WAjBF;AAAA,E,aAuBAC,S,WAvBA;AAAA,E,aA4BEA,S,WA5BF;AAAA,E,aAiCAC,W,WAjCA;AAAA,E,aAqCAC,Q,WArCA;AAAA,E,aA0CEA,Q,WA1CF;AAAA,E,aA+CAC,U,WA/CA;AAAA;AAAA","file":"Accordion.module.css.d.ts","sourceRoot":""}

package/src/components/Accordion/Accordion.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HasChildren } from '../../types';
 import { AccordionContent } from './AccordionContent';
 import { AccordionContext } from './AccordionContext';
@@ -16,6 +17,9 @@ function useAccordionId(id: AccordionProps['id']) {
 }
 
 export interface AccordionProps extends HasChildren {
+  /**
+   * Используется для генерации id для заголовка и контента(a11y).
+   */
   id?: string;
   /**
    * Управляет раскрытием и скрытием контента.
@@ -29,6 +33,9 @@ export interface AccordionProps extends HasChildren {
    * Возвращает новое значение при изменении раскрытия/сворачивания контента.
    */
   onChange?: (newValue: boolean) => void;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
 }
 
@@ -65,10 +72,10 @@ export const Accordion: React.FC<AccordionProps> & {
   return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;
 };
 
-Accordion.displayName = 'Accordion';
-
 Accordion.Summary = AccordionSummary;
-Accordion.Summary.displayName = 'Accordion.Summary';
-
 Accordion.Content = AccordionContent;
-Accordion.Content.displayName = 'Accordion.Content';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(Accordion.Summary, 'Accordion.Summary');
+  defineComponentDisplayNames(Accordion.Content, 'Accordion.Content');
+}

package/src/components/Accordion/AccordionContent.tsx

@@ -25,13 +25,13 @@ export interface AccordionContentProps
     HasRef<HTMLDivElement>,
     React.HTMLAttributes<HTMLDivElement> {}
 
-export const AccordionContent: React.FC<AccordionContentProps> = ({
+export const AccordionContent = ({
   getRootRef,
   getRef,
   className,
   children,
   ...restProps
-}) => {
+}: AccordionContentProps) => {
   const { expanded, labelId, contentId } = React.useContext(AccordionContext);
 
   const inRef = useExternRef(getRef);
@@ -81,5 +81,3 @@ export const AccordionContent: React.FC<AccordionContentProps> = ({
     </div>
   );
 };
-
-AccordionContent.displayName = 'AccordionContent';

package/src/components/Accordion/AccordionContext.tsx

@@ -2,9 +2,22 @@ import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 
 export interface AccordionContextProps {
+  /**
+   * [a11y] Id для `Accordion.Summary`.
+   */
   labelId: string;
+  /**
+   * [a11y] Id для свойства `Accordion.Content`.
+   */
   contentId: string;
+  /**
+   * Состояние аккордеона
+   * `true` - аккордеон развернут, `false` - аккордеон свернут.
+   */
   expanded: boolean;
+  /**
+   * Обработчик изменения состояния аккордеона.
+   */
   onChange: (e: boolean) => void;
 }
 

package/src/components/Accordion/AccordionSummary.tsx

@@ -22,7 +22,7 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'chevron'>
   iconPosition?: 'before' | 'after';
 }
 
-export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
+export const AccordionSummary = ({
   after,
   before,
   ExpandIcon = Icon24ChevronDown,
@@ -69,5 +69,3 @@ export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
     </SimpleCell>
   );
 };
-
-AccordionSummary.displayName = 'AccordionSummary';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ActionSheet.module.css"],"names":["host","contentWrapper","header","opening","closing","title","description","ios","closeItemWrapperIos","sizeYCompact","menu"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAWEA,M,WAXF;AAAA,E,aAiBAC,gB,WAjBA;AAAA,E,aA0BAC,Q,WA1BA;AAAA,E,aAgCAC,S,WAhCA;AAAA,E,aAqCAC,S,WArCA;AAAA,E,aA2CAC,O,WA3CA;AAAA,E,aA2CSC,a,WA3CT;AAAA,E,aAkDAC,K,WAlDA;AAAA,E,aAuDAA,K,WAvDA;AAAA,E,aAuDKN,gB,WAvDL;AAAA,E,aA4DAO,qB,WA5DA;AAAA,E,aAoEAD,K,WApEA;AAAA,E,aAoEIH,S,WApEJ;AAAA,E,aAwEAG,K,WAxEA;AAAA,E,aAwEKL,Q,WAxEL;AAAA,E,aA6EAK,K,WA7EA;AAAA,E,aA6EKF,O,WA7EL;AAAA,E,aAiFAE,K,WAjFA;AAAA,E,aAiFKD,a,WAjFL;AAAA,E,aAqFAC,K,WArFA;AAAA,E,aAqFKL,Q,WArFL;AAAA,E,aAmGAO,c,WAnGA;AAAA,E,aAmGcP,Q,WAnGd;AAAA,E,aA2GAQ,M,WA3GA;AAAA,E,aAqHAA,M,WArHA;AAAA,E,aAqHKH,K,WArHL;AAAA,E,aAqHUN,gB,WArHV;AAAA,E,aA2HES,M,WA3HF;AAAA;AAAA","file":"ActionSheet.module.css.d.ts","sourceRoot":""}

package/src/components/ActionSheet/ActionSheet.tsx

@@ -19,6 +19,9 @@ import styles from './ActionSheet.module.css';
 
 type CloseInitiators = 'action-item' | 'cancel-item' | 'other';
 export interface ActionSheetOnCloseOptions {
+  /**
+   * Причина закрытия всплывающего элемента.
+   */
   closedBy: CloseInitiators;
 }
 
@@ -27,19 +30,43 @@ export interface ActionSheetProps
       SharedDropdownProps,
       'toggleRef' | 'popupOffsetDistance' | 'placement' | 'allowClickPropagation'
     >,
-    Omit<UseFocusTrapProps, 'onClose'>,
+    Omit<UseFocusTrapProps, 'onClose' | 'mount' | 'disabled' | 'captureEscapeKeyboardEvent'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
+  /**
+   * Заголовок всплыващего окна.
+   */
   title?: React.ReactNode;
+  /**
+   * Описание всплыващего окна, под заголовком.
+   */
   description?: React.ReactNode;
   /**
-   * Закрыть попап по клику снаружи.
+   * Закрыть всплыващее окно по нажатию снаружи.
    */
   onClose: (options: ActionSheetOnCloseOptions) => void;
   /**
    * Только мобильный iOS.
    */
   iosCloseItem?: React.ReactNode;
+  /**
+   * Режим отображения компонента:
+   *
+   * - `sheet` – отображение снизу экрана в виде всплывающего окна, подходит для мобильных устройств
+   * - `menu` –  отображение в виде всплывающего элемента, относительно якорного элемента.
+   */
   mode?: 'sheet' | 'menu';
+  /**
+   * @deprecated Since 7.3.0.
+   *
+   * Свойство не используется и будет удалено в `v8`.
+   */
+  mount?: boolean;
+  /**
+   * @deprecated Since 7.3.0.
+   *
+   * Свойство не используется и будет удалено в `v8`.
+   */
+  disabled?: boolean;
 }
 
 /**

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -3,15 +3,38 @@ import * as React from 'react';
 export type ActionType<T> = (event: React.MouseEvent<T>) => void;
 
 export type ItemClickHandler<T extends Element = Element> = (options: {
+  /**
+   * Действие, которое будет выполненно после завершения анимации скрытия и после вызова onClose.
+   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
+   * Если вам нужен объект события именно на момент нажатия, используйте `immediateAction`.
+   */
   action: ActionType<T> | undefined;
+  /**
+   * Действие, которое выполняется непосредственно в момент нажатия (в отличие от `action`).
+   */
   immediateAction: ActionType<T> | undefined;
+  /**
+   * Флаг, указывающий, нужно ли автоматически закрывать `ActionSheet`.
+   */
   autoClose: boolean;
+  /**
+   * Флаг, указывающий является ли элемент кнопкой отмены.
+   */
   isCancelItem: boolean;
 }) => (event: React.MouseEvent) => void;
 
 export type ActionSheetContextType<T extends Element = Element> = {
+  /**
+   * Обработчик нажатия на элемент.
+   */
   onItemClick?: ItemClickHandler<T>;
+  /**
+   * Обработчик закрытия `ActionSheet`.
+   */
   onClose?: () => void;
+  /**
+   * Режим отображения `ActionSheet`.
+   */
   mode?: 'sheet' | 'menu';
 };
 

package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx

@@ -1,9 +1,12 @@
 import { ActionSheetItem, type ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
 
-export const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps): React.ReactNode => {
+export const ActionSheetDefaultIosCloseItem = ({
+  children = 'Отмена',
+  ...restProps
+}: ActionSheetItemProps): React.ReactNode => {
   return (
-    <ActionSheetItem mode="cancel" isCancelItem {...props}>
-      Отмена
+    <ActionSheetItem mode="cancel" isCancelItem {...restProps}>
+      {children}
     </ActionSheetItem>
   );
 };

package/src/components/ActionSheet/types.ts

@@ -5,23 +5,26 @@ import { type FocusTrapProps } from '../FocusTrap/FocusTrap';
 export type ToggleRef = Element | null | undefined | React.RefObject<Element | null>;
 
 export interface SharedDropdownProps extends FocusTrapProps {
+  /**
+   * Состояние закрытия всплывающего окна.
+   */
   closing: boolean;
   /**
-   * Элемент, рядом с которым вылезает попап на десктопе.
-   * Лучше передавать RefObject c current.
+   * Элемент, рядом с которым вылезает всплывающий элемент на десктопе.
+   * Лучше передавать `RefObject` c current.
    */
   toggleRef: ToggleRef;
   /**
    * Позиционирование всплывающего окна для десктопа.
-   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства
+   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства.
    */
   placement?: PlacementWithAuto;
   /**
-   * Отступ, где заданное кол-во единиц равняется пикселям
+   * Отступ, где заданное кол-во единиц равняется пикселям.
    * */
   popupOffsetDistance?: number;
   /**
-   * По умолчанию событие onClick не всплывает
+   * По умолчанию событие `onClick` не всплывает.
    */
   allowClickPropagation?: boolean;
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ActionSheetItem.module.css"],"names":["host","container","before","after","ellipsis","content","children","subtitle","meta","menu","ios","modeDestructive","rich","modeCancel","active","centered","marker","sizeYCompact"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,W,WAbA;AAAA,E,aAcAC,Q,WAdA;AAAA,E,aAeAC,O,WAfA;AAAA,E,aAmBAD,Q,WAnBA;AAAA,E,aAoBAC,O,WApBA;AAAA,E,aAwBAF,W,WAxBA;AAAA,E,aA+BAG,U,WA/BA;AAAA,E,aAoCAC,S,WApCA;AAAA,E,aA2CAD,U,WA3CA;AAAA,E,aA2CUC,S,WA3CV;AAAA,E,aA+CAC,U,WA/CA;AAAA,E,aAqDAC,U,WArDA;AAAA,E,aA4DAC,M,WA5DA;AAAA,E,aAkEAN,Q,WAlEA;AAAA,E,aAuEAO,M,WAvEA;AAAA,E,aAuEMP,Q,WAvEN;AAAA,E,aA2EAQ,K,WA3EA;AAAA,E,aA2EKR,Q,WA3EL;AAAA,E,aAgFAS,iB,WAhFA;AAAA,E,aAgFiBV,W,WAhFjB;AAAA,E,aAoFAU,iB,WApFA;AAAA,E,aAoFiBT,Q,WApFjB;AAAA,E,aAwFAC,O,WAxFA;AAAA,E,aAgGAA,O,WAhGA;AAAA,E,aAwGAO,K,WAxGA;AAAA,E,aAgHAE,M,WAhHA;AAAA,E,aAoHAF,K,WApHA;AAAA,E,aAoHIC,iB,WApHJ;AAAA,E,aAwHAD,K,WAxHA;AAAA,E,aAqIAA,K,WArIA;AAAA,E,aAgJEA,K,WAhJF;AAAA,E,aAqJEA,K,WArJF;AAAA,E,aA0JAA,K,WA1JA;AAAA,E,aA2JAG,Y,WA3JA;AAAA,E,aA+JAH,K,WA/JA;AAAA,E,aA+JII,Q,WA/JJ;AAAA,E,aAqKAJ,K,WArKA;AAAA,E,aAqKKT,W,WArKL;AAAA,E,aAyKAS,K,WAzKA;AAAA,E,aAyKKK,U,WAzKL;AAAA,E,aA6KAF,Y,WA7KA;AAAA,E,aAqLAJ,M,WArLA;AAAA,E,aA+LAT,M,WA/LA;AAAA,E,aA+LgBM,U,WA/LhB;AAAA,E,aAgMAN,M,WAhMA;AAAA,E,aAgMgBQ,M,WAhMhB;AAAA,E,aAiMAR,M,WAjMA;AAAA,E,aAiMgBO,U,WAjMhB;AAAA,E,aAqMAP,M,WArMA;AAAA,E,aAqMgBgB,Q,WArMhB;AAAA,E,aAsMAhB,M,WAtMA;AAAA,E,aAsMgBE,Q,WAtMhB;AAAA,E,aA8MAe,c,WA9MA;AAAA,E,aAkNAA,c,WAlNA;AAAA,E,aAkNaP,K,WAlNb;AAAA,E,aAwNAO,c,WAxNA;AAAA,E,aAwNkBP,K,WAxNlB;AAAA,E,aAwN0BO,c,WAxN1B;AAAA,E,aAwN4CP,K,WAxN5C;AAAA,E,aA4NAO,c,WA5NA;AAAA,E,aA4NchB,W,WA5Nd;AAAA;AAAA","file":"ActionSheetItem.module.css.d.ts","sourceRoot":""}

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -18,36 +18,68 @@ export interface ActionSheetItemProps
   extends React.HTMLAttributes<HTMLElement>,
     React.AnchorHTMLAttributes<HTMLElement>,
     Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {
+  /**
+   * Свойство, определяющее внешний вид элемента действия.
+   */
   mode?: 'default' | 'destructive' | 'cancel';
+  /**
+   * Если указано, элемент будет использоваться как ссылка.
+   */
+  href?: string;
+  /**
+   * Атрибут `target` для тега `<a>`.
+   */
+  target?: string;
+  /**
+   * Иконка или другой React-элемент для отображения перед основным контентом.
+   */
   before?: React.ReactNode;
+  /**
+   * Иконка или другой React-элемент для отображения после основного контента.
+   */
   after?: React.ReactNode;
+  /**
+   * Дополнительная информация, отображаемая рядом с основным контентом.
+   */
   meta?: React.ReactNode;
+  /**
+   * Слот для подсказки или вспомогательного текста.
+   */
   subtitle?: React.ReactNode;
   /**
-   * По умолчанию клик на опцию вызывает переданную в `ActionSheet` функцию `onClose`, данное свойство
-   * позволяет отключить такое поведение
+   * По умолчанию нажатие на опцию вызывает переданную в `ActionSheet` функцию `onClose`, данное свойство
+   * позволяет отключить такое поведение.
    */
   autoCloseDisabled?: boolean;
+  /**
+   * Включает возможность выбрать элемент (отображает радиокнопку).
+   */
   selectable?: boolean;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
   /**
-   * Все текстовые элементы при необходимости занимают несколько строк
+   * Все текстовые элементы при необходимости занимают несколько строк.
    */
   multiline?: boolean;
   /**
-   * По умолчанию onClick будет вызван после завершения анимации скрытия и после вызова onClose.
+   * По умолчанию `onClick` будет вызван после завершения анимации скрытия и после вызова `onClose`.
    * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
-   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.
+   * Если вам нужен объект события именно на момент нажатия, используйте `onImmediateClick`.
    */
   onClick?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * Обработчик нажатия, вызывающийся непосредственно в момент нажатия (в отличие от `onClick`).
+   */
   onImmediateClick?: React.MouseEventHandler<HTMLElement>;
   /**
-   * Иконка для `checked` режима.
+   * Иконка для `selectable` режима.
    */
   iconChecked?: React.ReactNode;
   /**
-   * Позволяет отделить ActionItem от CancelItem для определении того,
-   * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()
+   * Позволяет отделить `ActionItem` от `CancelItem` для определении того,
+   * кто вызвал закрытие `ActionSheet`. Используется в `ActionSheet.onClose()`.
    */
   isCancelItem?: boolean;
 }

package/src/components/ActionSheetItem/helpers.ts

@@ -1,8 +1,8 @@
 /**
- * По дизайну `ActionSheet` должен закрывать при клике на `ActionSheetItem`.
+ * По дизайну `ActionSheet` должен закрывать при нажатии на `ActionSheetItem`.
  * В режиме `selectable` в реализации используются нативный input type=radio
  * И при навигации стрелочками по элементам происходит событие `click` из-за чего `ActionSheet` закрывается.
- * Поэтому нужно как-то отличить реальное событие клика
+ * Поэтому нужно как-то отличить реальное событие нажатия.
  * @see https://github.com/facebook/react/issues/7407
  * @see https://github.com/VKCOM/VKUI/issues/6954
  */

package/src/components/ActionSheetItem/subcomponents/Radio/Radio.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Radio.module.css"],"names":["input"],"mappings":"AAAA;AAAA,E,aACAA,O,WADA;AAAA,E,aAMAA,O,WANA;AAAA;AAAA","file":"Radio.module.css.d.ts","sourceRoot":""}

package/src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.tsx

@@ -4,7 +4,13 @@ import * as React from 'react';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 
 export interface AdaptiveIconRendererProps {
+  /**
+   * Компонент иконки для компактного размера.
+   */
   IconCompact: React.ComponentType<{ className?: string }>;
+  /**
+   * Компонент иконки для обычного размера.
+   */
   IconRegular: React.ComponentType<{ className?: string }>;
 }
 

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -4,25 +4,33 @@ import * as React from 'react';
 import type { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';
 
 export interface SizeProps {
+  /**
+   * Тип размера экрана по горизонтали.
+   */
   sizeX?: SizeTypeValues;
+  /**
+   * Тип размера экрана по вертикали.
+   */
   sizeY?: SizeTypeValues;
 }
 
 export interface AdaptivityProps extends SizeProps {
   /**
-   * @ignore
+   * Тип ширины экрана для адаптивного отображения.
    */
   viewWidth?: ViewWidthType;
   /**
-   * @ignore
+   * Тип высоты экрана для адаптивного отображения.
    */
   viewHeight?: ViewHeightType;
   /**
-   * @ignore
+   * Флаг наличия указателя (например, мыши) на устройстве.
    */
   hasPointer?: boolean;
   /**
-   * @ignore
+   * @deprecated Since 7.3.0.
+   *
+   * Свойство нигде не используется и будет удалено в `v8`.
    */
   hasHover?: boolean;
 }

package/src/components/Alert/Alert.module.css

@@ -258,8 +258,8 @@
 .vkcom {
   inline-size: 400px;
   box-shadow:
-    0 0 2px rgba(0, 0, 0, 0.12),
-    0 0 96px rgba(0, 0, 0, 0.16);
+    0 0 2px rgb(0, 0, 0, 0.12),
+    0 0 96px rgb(0, 0, 0, 0.16);
 }
 
 .vkcom .content {

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./Alert.module.css"],"names":["host","desktop","opening","closing","content","contentWithButton","action","actions","title","description","actionsDirectionHorizontal","actionsDirectionVertical","actionsAlignLeft","actionsAlignCenter","actionsAlignRight","ios","actionModeCancel","actionModeDestructive","vkcom","button","buttonModeCancel","dismiss"],"mappings":"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","file":"Alert.module.css.d.ts","sourceRoot":""}

package/src/components/Alert/Alert.tsx

@@ -25,56 +25,85 @@ export interface AlertActionInterface
   extends Pick<ButtonProps, 'Component'>,
     AnchorHTMLAttributesOnly,
     HasDataAttribute {
+  /**
+   * Текст опции.
+   */
   title: string;
   /**
-   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,
+   * Обработчик нажатия на опцию. Если свойство `autoCloseDisabled` включено,
    * то в аргументы `action` передаётся объект с функцией close,
    * вызвав которую можно закрыть `action` вручную.
    */
   action?: (args?: { close?: VoidFunction }) => void;
   /**
-   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство
-   * позволяет отключить такое поведение
+   * По умолчанию нажатие на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство
+   * позволяет отключить такое поведение.
    */
   autoCloseDisabled?: boolean;
+  /**
+   * Режим отображения опции.
+   */
   mode: AlertActionMode;
 }
 
 export interface AlertProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,
-    Pick<UseFocusTrapProps, 'restoreFocus'>,
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'autoFocus'>,
+    Pick<UseFocusTrapProps, 'restoreFocus' | 'autoFocus'>,
+    Pick<AppRootPortalProps, 'usePortal'>,
     HasRootRef<HTMLDivElement> {
+  /**
+   * Расположение действий - вертикально или горизонтально.
+   */
   actionsLayout?: 'vertical' | 'horizontal';
+  /**
+   * Тип выравнивания действий.
+   */
   actionsAlign?: AlignType;
+  /**
+   * Список действий.
+   */
   actions?: AlertActionInterface[];
+  /**
+   * Функция для отрисовки действия.
+   */
   renderAction?: (props: AlertActionProps) => React.ReactNode;
+  /**
+   * Заголовок модального окна.
+   */
   title?: React.ReactNode;
+  /**
+   * Описание модального окна.
+   */
   description?: React.ReactNode;
+  /**
+   * Обработчик закрытия модального окна.
+   */
   onClose: VoidFunction;
   /**
-   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий
+   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий.
    */
   dismissLabel?: string;
   /**
    * Расположение кнопки закрытия (внутри и вне `popout'a`)
-   * Доступно только в `compact`-режиме, не отображается на `iOS`
+   * Доступно только в `compact`-режиме, не отображается на `iOS`.
+   *
+   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте.
    */
-  dismissButtonMode?: 'inside' | 'outside';
+  dismissButtonMode?: 'inside' | 'outside' | 'none';
   /**
-   * Передает атрибут `data-testid` для кнопки закрытия
+   * Передает атрибут `data-testid` для кнопки закрытия.
    */
   dismissButtonTestId?: string;
   /**
-   * Передает атрибут `data-testid` для заголовка
+   * Передает атрибут `data-testid` для заголовка.
    */
   titleTestId?: string;
   /**
-   * Передает атрибут `data-testid` для описания
+   * Передает атрибут `data-testid` для описания.
    */
   descriptionTestId?: string;
-  usePortal?: AppRootPortalProps['usePortal'];
   /**
-   * По умолчанию событие onClick не всплывает
+   * По умолчанию событие onClick не всплывает.
    */
   allowClickPropagation?: boolean;
 }

package/src/components/Alert/AlertAction.tsx

@@ -12,7 +12,13 @@ import styles from './Alert.module.css';
 export interface AlertActionProps
   extends Pick<AlertActionInterface, 'Component' | 'mode'>,
     AnchorHTMLAttributesOnly {
+  /**
+   * Содержимое компонента.
+   */
   children: string;
+  /**
+   * Обработчик нажатия.
+   */
   onClick: React.MouseEventHandler<HTMLElement>;
 }
 

package/src/components/Alert/AlertActions.tsx

@@ -21,6 +21,9 @@ const directionStyles = {
 type ItemClickHandler = (item: AlertActionInterface) => void;
 interface AlertActionsProps
   extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {
+  /**
+   * Обработчик нажатия на одну из опций.
+   */
   onItemClick: ItemClickHandler;
 }
 export const AlertActions = ({

package/src/components/Alert/AlertBase.tsx

@@ -17,7 +17,15 @@ import styles from './Alert.module.css';
 
 export interface AlertBaseProps
   extends Omit<AlertProps, 'usePortal' | 'className' | 'style' | 'getRootRef'> {
+  /**
+   * Флаг, определяющий состояние закрытия модального окна.
+   * Когда установлен в true, запускает анимацию закрытия окна.
+   */
   closing?: boolean;
+  /**
+   * Функция обратного вызова для управления состоянием закрытия модального окна.
+   * Принимает булево значение, которое определяет, находится ли окно в процессе закрытия.
+   */
   setClosing?: (closing: boolean) => void;
 }
 

package/src/components/Alert/AlertTypography.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import { usePlatform } from '../../hooks/usePlatform';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./AppRoot.module.css"],"names":["host","layoutCard","layoutPlain","transformForPositionFixedElements"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Y,WATA;AAAA,E,aAaAC,a,WAbA;AAAA,E,aAiBAC,mC,WAjBA;AAAA;AAAA","file":"AppRoot.module.css.d.ts","sourceRoot":""}