feat(HorizontalCell): add titleComponent (#8001)

* feat(HorizontalCell): add titleComponent

* fix: review

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
-import type {
-  CSSCustomProperties,
-  HasRef,
-  HasRootRef,
-  HTMLAttributesWithRootRef,
-  LiteralUnion,
-} from '../../types';
+import type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { Avatar } from '../Avatar/Avatar';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
@@ -32,18 +26,6 @@ const textAlignClassNames = {
 
 type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';
 
-interface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
-  size: HorizontalCellProps['size'];
-}
-
-const CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {
-  return size === 's' ? (
-    <Caption {...restProps}>{children}</Caption>
-  ) : (
-    <Subhead {...restProps}>{children}</Subhead>
-  );
-};
-
 export interface HorizontalCellProps
   extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,
     HasRootRef<HTMLDivElement>,
@@ -78,6 +60,11 @@ export interface HorizontalCellProps
    * Актуально для использования в многострочных списках
    */
   noPadding?: boolean;
+  /**
+   * Позволяет передать типографический компонент, используемый для `title`.
+   * По умолчанию `Caption` для `size=s`, иначе `Subhead`.
+   */
+  TitleComponent?: React.ElementType;
 }
 
 /**
@@ -95,6 +82,7 @@ export const HorizontalCell = ({
   extraSubtitle,
   textAlign = size === 's' ? 'center' : 'start',
   noPadding = false,
+  TitleComponent = size === 's' ? Caption : Subhead,
   ...restProps
 }: HorizontalCellProps): React.ReactNode => {
   const hasTypography =
@@ -125,7 +113,7 @@ export const HorizontalCell = ({
               textAlign !== 'start' && textAlignClassNames[textAlign],
             )}
           >
-            {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}
+            {hasReactNode(title) && <TitleComponent>{title}</TitleComponent>}
             {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}
             {hasReactNode(extraSubtitle) && (
               <Footnote className={styles.subtitle}>{extraSubtitle}</Footnote>