feat: add render prop

packages/vkui/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -23,7 +23,7 @@ export interface MiniInfoCellProps
       TappableOmitProps,
       'hoverMode' | 'activeMode' | 'hovered' | 'activated' | 'hasHover' | 'hasActive'
     >,
-    RootComponentProps<HTMLDivElement> {
+    RootComponentProps<HTMLElement> {
   /**
    * Иконка слева.<br />
    * Рекомендуется использовать иконки размера 20.

packages/vkui/src/components/RootComponent/RootComponent.test.tsx

@@ -1,6 +1,68 @@
+import { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { RootComponent } from './RootComponent';
 
 describe('RootComponent', () => {
   baselineComponent(RootComponent);
+
+  describe('render prop', () => {
+    it('uses render instead of Component', () => {
+      render(
+        <RootComponent
+          Component="div"
+          render={({ getRootRef, ...props }) => <span data-testid="rendered" {...props} />}
+        />,
+      );
+
+      const node = screen.getByTestId('rendered');
+      expect(node.tagName).toBe('SPAN');
+    });
+
+    it('passes resolved className and style to render', () => {
+      render(
+        <RootComponent
+          className="customClassName"
+          baseClassName="baseClassName"
+          style={{ color: 'red' }}
+          baseStyle={{ backgroundColor: 'blue' }}
+          render={({ getRootRef, ...props }) => <div data-testid="rendered" {...props} />}
+        />,
+      );
+
+      const node = screen.getByTestId('rendered');
+      expect(node.classList.contains('customClassName')).toBe(true);
+      expect(node.classList.contains('baseClassName')).toBe(true);
+      expect(node.style.color).toBe('red');
+      expect(node.style.backgroundColor).toBe('blue');
+    });
+
+    it('passes rest props to render', () => {
+      render(
+        <RootComponent
+          id="custom-id"
+          aria-label="label"
+          render={({ getRootRef, ...props }) => <div data-testid="rendered" {...props} />}
+        />,
+      );
+
+      const node = screen.getByTestId('rendered');
+      expect(node.id).toBe('custom-id');
+      expect(node.getAttribute('aria-label')).toBe('label');
+    });
+
+    it('forwards getRootRef through render', () => {
+      const ref = createRef<HTMLDivElement>();
+      render(
+        <RootComponent
+          getRootRef={ref}
+          render={({ getRootRef, ...props }) => (
+            <div data-testid="rendered" ref={getRootRef} {...props} />
+          )}
+        />,
+      );
+
+      expect(ref.current).toBe(screen.getByTestId('rendered'));
+    });
+  });
 });

packages/vkui/src/components/RootComponent/RootComponent.tsx

@@ -1,13 +1,13 @@
 import type * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
-import type { HasComponent, HasRootRef } from '../../types';
+import type { HasComponent, HasRender, HasRootRef } from '../../types';
 import styles from './RootComponent.module.css';
 
-export interface RootComponentProps<T>
-  extends React.AllHTMLAttributes<T>,
-    HasRootRef<T>,
-    HasComponent {}
+export type RootComponentProps<T> = React.AllHTMLAttributes<T> &
+  HasRootRef<T> &
+  HasComponent &
+  HasRender<T>;
 
 export interface RootComponentExtendProps {
   /**
@@ -24,6 +24,19 @@ export interface RootComponentInternalProps<T>
   extends RootComponentProps<T>,
     RootComponentExtendProps {}
 
+interface RenderRootComponentProps<T> extends Omit<RootComponentInternalProps<T>, 'render'> {
+  /**
+   * Функция кастомного рендера. См. `RootComponentProps['render']`.
+   */
+  render: NonNullable<RootComponentProps<T>['render']>;
+}
+
+const RenderRootComponent = <T,>({
+  render,
+  getRootRef,
+  ...restProps
+}: RenderRootComponentProps<T>): React.ReactNode => render({ ...restProps, getRootRef });
+
 /**
  * Базовый корневой компонент.
  */
@@ -34,17 +47,23 @@ export const RootComponent = <T,>({
   baseStyle,
   style,
   getRootRef,
+  render,
   ...restProps
-}: RootComponentInternalProps<T>): React.ReactNode => (
-  <Component
-    ref={getRootRef}
-    className={classNames(
+}: RootComponentInternalProps<T>): React.ReactNode => {
+  const resolvedProps = {
+    className: classNames(
       className,
       baseClassName,
       styles.host,
       restProps.hidden === true && styles.hidden,
-    )}
-    style={mergeStyle(baseStyle, style)}
-    {...restProps}
-  />
-);
+    ),
+    style: mergeStyle(baseStyle, style),
+    ...restProps,
+  };
+
+  if (render) {
+    return <RenderRootComponent render={render} getRootRef={getRootRef} {...resolvedProps} />;
+  }
+
+  return <Component ref={getRootRef} {...resolvedProps} />;
+};

packages/vkui/src/types.ts

@@ -26,6 +26,17 @@ export interface HasComponent {
   Component?: React.ElementType | undefined;
 }
 
+export type HasRender<T> = {
+  /**
+   * Позволяет переопределить рендер компонента, получая собранные свойства
+   * (включая вычисленные `className` и `style`). Используется вместо `Component`.
+   *
+   * Позволяет гибко объединять несколько компонентов без создания
+   * промежуточных DOM-узлов и без ремаунта поддерева на каждый рендер.
+   */
+  render?: ((props: React.AllHTMLAttributes<T> & HasRootRef<T>) => React.ReactNode) | undefined;
+};
+
 export interface HasAlign {
   align?: AlignType | undefined;
 }