@vkontakte/vkui 7.4.3 → 7.5.0

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -44,12 +44,12 @@ export const ChipsInputBase = <O extends ChipOption>({
   // option
   value = DEFAULT_VALUE,
   onAddChipOption,
-  onRemoveChipOption: onRemoveChipOptionProp,
+  'onRemoveChipOption': onRemoveChipOptionProp,
   renderChip = renderChipDefault,
 
   // input
   getRef,
-  id: idProp,
+  'id': idProp,
   inputValue = DEFAULT_INPUT_VALUE,
   placeholder,
   disabled,
@@ -63,11 +63,16 @@ export const ChipsInputBase = <O extends ChipOption>({
   clearButtonShown,
   clearButtonTestId,
   onClear,
+
+  // a11y
+  chipsListLabel = 'Выбранные элементы',
+  'aria-label': ariaLabel = '',
   ...restProps
 }: ChipsInputBasePrivateProps<O>): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const idGenerated = React.useId();
   const inputRef = useExternRef(getRef);
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const listboxRef = React.useRef<HTMLDivElement>(null);
 
   const valueLength = value.length;
@@ -153,6 +158,8 @@ export const ChipsInputBase = <O extends ChipOption>({
         }
         break;
       }
+      case Keys.HOME:
+      case Keys.END:
       case Keys.ARROW_UP:
       case Keys.ARROW_LEFT:
       case Keys.ARROW_DOWN:
@@ -199,12 +206,21 @@ export const ChipsInputBase = <O extends ChipOption>({
     }
   };
 
+  const handleClear = React.useCallback(() => {
+    if (inputRef.current) {
+      resetChipOptionFocusToInputEl(inputRef.current);
+    }
+    onClear();
+  }, [inputRef, onClear]);
+
   const clearButton = React.useMemo(() => {
     if (clearButtonShown) {
-      return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;
+      return (
+        <ClearButton onClick={handleClear} disabled={disabled} data-testid={clearButtonTestId} />
+      );
     }
     return undefined;
-  }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);
+  }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, handleClear]);
 
   const afterItems = React.useMemo(() => {
     if (clearButton || after) {
@@ -218,10 +234,16 @@ export const ChipsInputBase = <O extends ChipOption>({
     return undefined;
   }, [after, clearButton]);
 
+  const inputId = idProp || `chips-input-base-generated-id-${idGenerated}`;
+
   return (
     <FormField
       Component="div"
       getRootRef={getRootRef}
+      // role="group" добавлена, чтобы этот блок можно было найти с помощью стрелочек при использовании NVDA
+      // Если убрать, то aria-label не будет читаться
+      role="group"
+      aria-label={ariaLabel}
       style={style}
       disabled={disabled}
       before={before}
@@ -237,50 +259,59 @@ export const ChipsInputBase = <O extends ChipOption>({
           styles.host,
           sizeY !== 'regular' && sizeYClassNames[sizeY],
           withPlaceholder && styles.hasPlaceholder,
+          inputValue && styles.hasInputValue,
         )}
-        // для a11y
-        ref={listboxRef}
-        role="listbox"
-        aria-orientation="horizontal"
-        aria-disabled={disabled}
-        aria-readonly={readOnly}
+        ref={containerRef}
         onKeyDown={disabled ? undefined : handleListboxKeyDown}
       >
-        {value.map((option, index) => (
-          <React.Fragment key={`${typeof option.value}-${option.value}`}>
-            {renderChip(
-              {
-                'Component': 'div',
-                'value': option.value,
-                'label': option.label,
-                'disabled': option.disabled || disabled,
-                'readOnly': option.readOnly || readOnly,
-                'className': styles.chip,
-                'onRemove': handleChipRemove,
-                // чтобы можно было легче найти этот чип в DOM
-                'data-index': index,
-                'data-value': option.value,
-                'data-value-type': typeof option.value,
-                // для a11y
-                'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,
-                'role': 'option',
-                'aria-selected': true,
-                'aria-posinset': index + 1,
-                'aria-setsize': valueLength,
-              },
-              option,
-            )}
-          </React.Fragment>
-        ))}
+        <div
+          className={styles.listBox}
+          // для a11y
+          ref={listboxRef}
+          role="listbox"
+          aria-orientation="horizontal"
+          aria-disabled={disabled}
+          aria-readonly={readOnly}
+          aria-label={chipsListLabel}
+        >
+          {value.map((option, index) => (
+            <React.Fragment key={`${typeof option.value}-${option.value}`}>
+              {renderChip(
+                {
+                  'Component': 'div',
+                  'value': option.value,
+                  'label': option.label,
+                  'disabled': option.disabled || disabled,
+                  'readOnly': option.readOnly || readOnly,
+                  'className': styles.chip,
+                  'onRemove': handleChipRemove,
+                  // чтобы можно было легче найти этот чип в DOM
+                  'data-index': index,
+                  'data-value': option.value,
+                  'data-value-type': typeof option.value,
+                  // для a11y
+                  'tabIndex': lastFocusedChipOptionIndex === index ? 0 : -1,
+                  'role': 'option',
+                  'aria-selected': true,
+                  'aria-posinset': index + 1,
+                  'aria-setsize': valueLength,
+                  'aria-description': 'Для удаления используйте Backspace или Delete',
+                },
+                option,
+              )}
+            </React.Fragment>
+          ))}
+        </div>
         <Text
           autoCapitalize="none"
           autoComplete="off"
           autoCorrect="off"
           spellCheck={false}
           {...restProps}
+          aria-label={ariaLabel}
           Component="input"
           type="text"
-          id={idProp || `chips-input-base-generated-id-${idGenerated}`}
+          id={inputId}
           getRootRef={inputRef}
           className={styles.el}
           disabled={disabled}

package/src/components/ChipsInputBase/helpers.ts

@@ -62,6 +62,8 @@ export const getNextChipOptionIndexByNavigateToProp = (
       return nextIndex > LAST_INDEX ? 0 : nextIndex;
     case 'last':
       return LAST_INDEX;
+    case 'first':
+      return 0;
     default:
       /* istanbul ignore next */
       return -1;

package/src/components/ChipsInputBase/types.ts

@@ -9,7 +9,7 @@ import type {
 import { type FormFieldProps } from '../FormField/FormField';
 import { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';
 
-export type NavigateTo = 'prev' | 'next' | 'last';
+export type NavigateTo = 'prev' | 'next' | 'last' | 'first';
 
 export type ChipOptionValue = string | number;
 
@@ -191,6 +191,10 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
    * Должна принимать обязательное свойство `onClick`.
    */
   ClearButton?: React.ComponentType<FormFieldClearButtonProps>;
+  /**
+   * `aria-label` для списка выбранных опций.
+   */
+  chipsListLabel?: string;
 }
 
 /**

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -143,7 +143,7 @@ export interface ChipsSelectProps<O extends ChipOption>
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/ChipsSelect
+ * @see https://vkui.io/components/chips-select
  */
 export const ChipsSelect = <Option extends ChipOption>({
   // FormFieldProps
@@ -195,6 +195,9 @@ export const ChipsSelect = <Option extends ChipOption>({
   allowClearButton,
   clearButtonTestId,
   delimiter,
+
+  // a11y
+  chipsListLabel,
   ...restProps
 }: ChipsSelectProps<Option>): React.ReactNode => {
   const {
@@ -592,9 +595,9 @@ export const ChipsSelect = <Option extends ChipOption>({
         role="combobox"
         aria-expanded={opened}
         aria-autocomplete="list"
-        aria-controls={opened ? dropdownId : undefined}
         aria-activedescendant={opened ? dropdownCurrentItemId : undefined}
         aria-haspopup="listbox"
+        chipsListLabel={chipsListLabel}
       />
       {opened && (
         <CustomSelectDropdown

package/src/components/ColorSchemeProvider/ColorSchemeProvider.tsx

@@ -16,7 +16,7 @@ export interface ColorSchemeProviderProps {
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider
+ * @see https://vkui.io/components/color-scheme-provider
  */
 export const ColorSchemeProvider = ({
   value,

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -21,7 +21,7 @@ export interface ConfigProviderProps extends Partial<ConfigProviderContextInterf
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/ConfigProvider
+ * @see https://vkui.io/components/config-provider
  */
 export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {
   const props = excludeKeysWithUndefined(propsRaw);

package/src/components/ContentBadge/ContentBadge.tsx

@@ -80,7 +80,7 @@ export interface ContentBadgeProps
  * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.
  *
  * @since 6.1.0
- * @see https://vkcom.github.io/VKUI/#/ContentBadge
+ * @see https://vkui.io/components/content-badge
  */
 export const ContentBadge: React.FC<ContentBadgeProps> & {
   IconSlot: typeof ContentBadgeIconSlot;

package/src/components/ContentCard/ContentCard.tsx

@@ -52,7 +52,7 @@ export interface ContentCardProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/ContentCard
+ * @see https://vkui.io/components/content-card
  */
 export const ContentCard = ({
   overTitle,

package/src/components/Counter/Counter.tsx

@@ -54,7 +54,7 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Counter
+ * @see https://vkui.io/components/counter
  */
 export const Counter = ({
   mode = 'inherit',

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -52,7 +52,7 @@ export interface CustomScrollViewProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/CustomScrollView
+ * @see https://vkui.io/components/custom-scroll-view
  */
 export const CustomScrollView = ({
   className,

package/src/components/CustomSelect/CustomSelect.tsx

@@ -221,7 +221,7 @@ export interface SelectProps<
   popupDirection?: PopupDirection;
   /**
    * Рендер-проп для кастомного рендера опции.
-   * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props).
+   * В объекте аргумента приходят [свойства опции](https://vkui.io/components/custom-select#custom-select-option-api).
    *
    * > ⚠️  Важно: cвойство опции `disabled` должно выставляться только через проп `options`.
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии
@@ -304,7 +304,7 @@ export interface SelectProps<
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
 /**
- * @see https://vkcom.github.io/VKUI/#/CustomSelect
+ * @see https://vkui.io/components/custom-select
  */
 export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(
   props: SelectProps<OptionInterfaceT>,

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -50,15 +50,15 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
   /**
    * Блокирует весь блок.
    *
-   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.
-   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии
+   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkui.io/components/select), [CustomSelect](https://vkui.io/components/custom-select) или [ChipsSelect](https://vkui.io/components/chips-select), то свойство явно должно выставляться только через структуру `options`.
+   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkui.io/components/custom-select) и [ChipsSelect](https://vkui.io/components/chips-select) не будут знать об актуальном состоянии
    * опции.
    */
   disabled?: boolean;
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
+ * @see https://vkui.io/components/custom-select#custom-select-option
  */
 export const CustomSelectOption = ({
   children,

package/src/components/DateInput/DateInput.tsx

@@ -216,7 +216,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
 };
 
 /**
- * @see https://vkcom.github.io/VKUI/#/DateInput
+ * @see https://vkui.io/components/date-input
  */
 export const DateInput = ({
   enableTime,

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -215,7 +215,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
 };
 
 /**
- * @see https://vkcom.github.io/VKUI/#/DateRangeInput
+ * @see https://vkui.io/components/date-range-input
  */
 export const DateRangeInput = ({
   shouldDisableDate,

package/src/components/DirectionProvider/DirectionProvider.tsx

@@ -15,7 +15,7 @@ export interface DirectionProviderProps {
 
 /**
  * Компонент, прокидывающий направление контента.
- * @see https://vkcom.github.io/VKUI/#/DirectionProvider
+ * @see https://vkui.io/components/direction-provider
  * @since 7.2.0
  */
 export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode {

package/src/components/Div/Div.tsx

@@ -6,7 +6,7 @@ import styles from './Div.module.css';
 export type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Div
+ * @see https://vkui.io/components/div
  */
 export const Div = (props: DivProps): React.ReactNode => (
   <RootComponent baseClassName={styles.host} {...props} />

package/src/components/DropZone/DropZone.tsx

@@ -28,7 +28,7 @@ export interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
  * область на странице.
  *
  * @since 6.1.0
- * @see https://vkcom.github.io/VKUI/#/DropZone
+ * @see https://vkui.io/components/drop-zone
  */
 export const DropZone: React.FC<DropZoneProps> & {
   Grid: typeof DropZoneGrid;

package/src/components/Epic/Epic.tsx

@@ -28,7 +28,7 @@ export interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
 const warn = warnOnce('Epic');
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Epic
+ * @see https://vkui.io/components/epic
  */
 export const Epic = ({
   activeStory,

package/src/components/Epic/ScrollSaver.tsx

@@ -11,9 +11,6 @@ export interface ScrollSaverProps extends HasChildren {
   saveScroll: (this: void, scroll: number) => any;
 }
 
-/**
- * @see https://vkcom.github.io/VKUI/#/ScrollSaver
- */
 export const ScrollSaver = ({
   children,
   initialScroll,

package/src/components/File/File.tsx

@@ -10,7 +10,7 @@ export interface FileProps
     HasRootRef<HTMLElement> {}
 
 /**
- * @see https://vkcom.github.io/VKUI/#/File
+ * @see https://vkui.io/components/file
  */
 export const File = ({
   children = 'Выберите файл',

package/src/components/FixedLayout/FixedLayout.tsx

@@ -35,7 +35,7 @@ export interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/FixedLayout
+ * @see https://vkui.io/components/fixed-layout
  */
 export const FixedLayout = ({
   children,

package/src/components/Flex/Flex.tsx

@@ -72,6 +72,9 @@ export interface FlexProps extends Omit<RootComponentProps<HTMLElement>, 'baseCl
   reverse?: boolean;
 }
 
+/**
+ * @see https://vkui.io/components/flex
+ */
 export const Flex: React.FC<FlexProps> & {
   Item: typeof FlexItem;
 } = ({

package/src/components/FocusTrap/FocusTrap.tsx

@@ -12,9 +12,6 @@ export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
     HasRootRef<T>,
     HasComponent {}
 
-/**
- * @see https://vkcom.github.io/VKUI/#/FocusTrap
- */
 export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   Component = 'div',
   onClose,

package/src/components/Footer/Footer.tsx

@@ -7,7 +7,7 @@ import styles from './Footer.module.css';
 export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Footer
+ * @see https://vkui.io/components/group#footer
  */
 export const Footer = ({
   children,

package/src/components/FormField/FormField.tsx

@@ -46,7 +46,7 @@ export interface FormFieldProps {
    * Рекомендации:
    *
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
-   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна иконка, реагирующая на нажатие.
+   * - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагирующая на нажатие.
    */
   before?: React.ReactNode;
   /**
@@ -59,7 +59,7 @@ export interface FormFieldProps {
    * Рекомендации:
    *
    * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
-   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна иконка, реагируюущая на нажатие.
+   * - Используйте [IconButton](https://vkui.io/components/icon-button), если вам нужна иконка, реагируюущая на нажатие.
    */
   after?: React.ReactNode;
   /**
@@ -91,7 +91,7 @@ export interface FormFieldOwnProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/FormField
+ * @see https://vkui.io/components/form-field
  */
 export const FormField = ({
   Component = 'span',

package/src/components/FormItem/FormItem.tsx

@@ -82,7 +82,7 @@ export interface FormItemProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/FormItem
+ * @see https://vkui.io/components/form-item
  */
 export const FormItem: React.FC<FormItemProps> & {
   Top: typeof FormItemTop;

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -35,7 +35,7 @@ export interface FormLayoutGroupProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
+ * @see https://vkui.io/components/form-layout-group
  */
 export const FormLayoutGroup = ({
   children,

package/src/components/FormStatus/FormStatus.tsx

@@ -16,7 +16,7 @@ export interface FormStatusProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/FormStatus
+ * @see https://vkui.io/components/form-status
  */
 export const FormStatus = ({
   mode,

package/src/components/Gallery/Gallery.tsx

@@ -20,7 +20,7 @@ export interface GalleryProps extends BaseGalleryProps {
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Gallery
+ * @see https://vkui.io/components/gallery
  */
 export const Gallery = ({
   initialSlideIndex = 0,

package/src/components/Gradient/Gradient.tsx

@@ -20,7 +20,7 @@ export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Gradient
+ * @see https://vkui.io/components/gradient
  */
 export const Gradient = ({
   mode = 'default',

package/src/components/GridAvatar/GridAvatar.tsx

@@ -20,7 +20,7 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
 const warn = warnOnce('GridAvatar');
 
 /**
- * @see https://vkcom.github.io/VKUI/#/GridAvatar
+ * @see https://vkui.io/components/grid-avatar
  */
 export const GridAvatar: React.FC<GridAvatarProps> & { Badge: typeof GridAvatarBadge } = ({
   src = [],

package/src/components/Group/Group.tsx

@@ -18,7 +18,7 @@ export interface GroupProps extends GroupContainerProps {
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Group
+ * @see https://vkui.io/components/group
  */
 export const Group: React.FC<GroupProps> & {
   Container: typeof GroupContainer;

package/src/components/Header/Header.tsx

@@ -98,7 +98,7 @@ const Subtitle: React.FC<
 };
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Header
+ * @see https://vkui.io/components/group#header
  */
 export const Header = ({
   size = 'm',

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -68,7 +68,7 @@ export interface HorizontalCellProps
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/HorizontalCell
+ * @see https://vkui.io/components/horizontal-cell
  */
 export const HorizontalCell = ({
   className,

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

@@ -43,6 +43,9 @@ export interface HorizontalCellShowMoreProps
   centered?: boolean;
 }
 
+/**
+ * @see https://vkui.io/components/horizontal-scroll#horizontal-cell-show-more
+ */
 export const HorizontalCellShowMore = ({
   className,
   style,

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -194,7 +194,7 @@ function doScroll({
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ * @see https://vkui.io/components/horizontal-scroll
  */
 export const HorizontalScroll = ({
   children,

package/src/components/IconButton/IconButton.tsx

@@ -24,7 +24,7 @@ export interface IconButtonProps extends TappableOmitProps {
 const warn = warnOnce('IconButton');
 
 /**
- * @see https://vkcom.github.io/VKUI/#/IconButton
+ * @see https://vkui.io/components/icon-button
  */
 export const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {
   const platform = usePlatform();

package/src/components/Image/Image.tsx

@@ -104,7 +104,7 @@ const getBorderRadiusBySizeInPx = (
 };
 
 /**
- * @see https://vkcom.github.io/VKUI/#/Image
+ * @see https://vkui.io/components/image
  */
 export const Image: React.FC<ImageProps> & {
   Badge: typeof ImageBadge;

package/src/components/ImageBase/ImageBase.tsx

@@ -152,7 +152,7 @@ const sizeToNumber = (size: number | string | undefined): number | undefined =>
 };
 
 /**
- * @see https://vkcom.github.io/VKUI/#/ImageBase
+ * @see https://vkui.io/components/image-base
  */
 export const ImageBase: React.FC<ImageBaseProps> & {
   Badge: typeof ImageBaseBadge;

package/src/components/InfoRow/InfoRow.tsx

@@ -14,7 +14,7 @@ export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 }
 
 /**
- * @see https://vkcom.github.io/VKUI/#/InfoRow
+ * @see https://vkui.io/components/info-row
  */
 export const InfoRow = ({
   header,