feat: remove custorm withChildren (#955)

README.md

@@ -25,7 +25,7 @@ The page constructor is imported as a React component. To make sure it runs prop
 ```jsx
 import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
 
-const Page: WithChildren<PageProps> = ({content}) => (
+const Page: React.PropsWithChildren<PageProps> = ({content}) => (
   <PageConstructorProvider>
     <PageConstructor content={content} />
   </PageConstructorProvider>

src/blocks/CardLayout/CardLayout.tsx

@@ -5,11 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 import {AnimateBlock, BackgroundImage, Title} from '../../components';
 import {useTheme} from '../../context/theme';
 import {Col, GridColumnSizesType, Row} from '../../grid';
-import {
-    CardLayoutBlockProps as CardLayoutBlockParams,
-    ClassNameProps,
-    WithChildren,
-} from '../../models';
+import {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';
 import {block, getThemedValue} from '../../utils';
 
 import './CardLayout.scss';
@@ -19,7 +15,9 @@ const DEFAULT_SIZES: GridColumnSizesType = {
     sm: 6,
     md: 4,
 };
-export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>> &
+export type CardLayoutBlockProps = React.PropsWithChildren<
+    Omit<CardLayoutBlockParams, 'children'>
+> &
     ClassNameProps;
 
 const b = block('card-layout-block');

src/blocks/Header/Header.tsx

@@ -9,7 +9,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import {MobileContext} from '../../context/mobileContext';
 import {useTheme} from '../../context/theme';
 import {Col, Grid, Row} from '../../grid';
-import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps, WithChildren} from '../../models';
+import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';
 import {block, getThemedValue} from '../../utils';
 
 import {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';
@@ -62,7 +62,7 @@ const FullWidthBackground = ({background}: FullWidthBackgroundProps) => (
     />
 );
 
-export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
+export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {
     const {
         title,
         overtitle,

src/blocks/Slider/Slider.tsx

@@ -28,7 +28,6 @@ import {
     SliderProps as SliderParams,
     SliderType,
     Timeout,
-    WithChildren,
 } from '../../models';
 import {block} from '../../utils';
 
@@ -63,7 +62,7 @@ export interface SliderProps
     arrowSize?: number;
 }
 
-export const SliderBlock = (props: WithChildren<SliderProps>) => {
+export const SliderBlock = (props: React.PropsWithChildren<SliderProps>) => {
     const {
         animated,
         title,

src/components/AnimateBlock/AnimateBlock.tsx

@@ -3,7 +3,7 @@ import React, {CSSProperties, useContext, useState} from 'react';
 import {Waypoint} from 'react-waypoint';
 
 import {AnimateContext, AnimateContextProps} from '../../context/animateContext/AnimateContext';
-import {QAProps, WithChildren} from '../../models';
+import {QAProps} from '../../models';
 import {block} from '../../utils';
 
 const b = block('AnimateBlock');
@@ -16,7 +16,7 @@ export interface AnimateBlockProps extends AnimateContextProps, QAProps {
     onScroll?: () => void;
 }
 
-const AnimateBlock = (props: WithChildren<AnimateBlockProps>) => {
+const AnimateBlock = (props: React.PropsWithChildren<AnimateBlockProps>) => {
     const {animated} = useContext(AnimateContext);
     const {children, className, offset = 100, onScroll, style, animate = animated, qa} = props;
     const [playAnimation, setPlayAnimation] = useState<boolean>(false);

src/components/AnimateBlock/__tests__/AnimateBlock.test.tsx

@@ -4,12 +4,11 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {testCustomClassName, testCustomStyle} from '../../../../test-utils/shared/common';
-import {WithChildren} from '../../../models';
 import AnimateBlock, {AnimateBlockProps} from '../AnimateBlock';
 
 const qa = 'animate-block';
 
-type ComponentProps = WithChildren<AnimateBlockProps>;
+type ComponentProps = React.PropsWithChildren<AnimateBlockProps>;
 
 describe('AnimateBlock', () => {
     test('render AnimateBlock by default', async () => {

src/components/Author/Author.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {AuthorProps, AuthorType, ImageProps, WithChildren} from '../../models';
+import {AuthorProps, AuthorType, ImageProps} from '../../models';
 import {block} from '../../utils';
 import {getMediaImage} from '../Media/Image/utils';
 import {Image} from '../index';
@@ -9,7 +9,7 @@ import './Author.scss';
 
 const b = block('author');
 
-const Author = (props: WithChildren<AuthorProps>) => {
+const Author = (props: React.PropsWithChildren<AuthorProps>) => {
     const {
         author,
         className,

src/components/BackgroundImage/BackgroundImage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {BackgroundImageProps, WithChildren} from '../../models';
+import {BackgroundImageProps} from '../../models';
 import {block, getQaAttrubutes} from '../../utils';
 import Image from '../Image/Image';
 
@@ -10,7 +10,7 @@ export const qaIdByDefault = 'background-image';
 
 const b = block('storage-background-image');
 
-const BackgroundImage = (props: WithChildren<BackgroundImageProps>) => {
+const BackgroundImage = (props: React.PropsWithChildren<BackgroundImageProps>) => {
     const {children, src, desktop, className, imageClassName, style, hide, qa} = props;
     const qaAttributes = getQaAttrubutes(qa || qaIdByDefault);
 

src/components/BalancedMasonry/BalancedMasonry.tsx

@@ -5,7 +5,7 @@ import first from 'lodash/first';
 import minBy from 'lodash/minBy';
 
 import {SSRContext} from '../../context/ssrContext';
-import {QAProps, WithChildren} from '../../models';
+import {QAProps} from '../../models';
 import {block, getQaAttrubutes} from '../../utils';
 
 import './BalancedMasonry.scss';
@@ -21,7 +21,7 @@ export interface BalancedMasonryProps extends QAProps {
     };
 }
 
-const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
+const BalancedMasonry = (props: React.PropsWithChildren<BalancedMasonryProps>) => {
     const {className, columnClassName, children = [], breakpointCols, qa} = props;
     const qaAttributes = getQaAttrubutes(qa, 'column');
     const {isServer} = useContext(SSRContext);

src/components/BlockBase/__tests__/BlockBase.test.tsx

@@ -5,14 +5,14 @@ import {render, screen} from '@testing-library/react';
 import {testCustomClassName} from '../../../../test-utils/shared/common';
 import {qaIdByDefault} from '../../../components/Anchor/Anchor';
 import {GridColumnSize, IndentValue} from '../../../grid';
-import {ClassNameProps, WithChildren} from '../../../models';
+import {ClassNameProps} from '../../../models';
 import BlockBase, {BlockBaseFullProps} from '../BlockBase';
 
 const qa = 'block-base-component';
 
 const indentValues: IndentValue[] = ['0', 'xs', 's', 'm', 'l', 'xl'];
 
-type ComponentProps = WithChildren<BlockBaseFullProps & ClassNameProps>;
+type ComponentProps = React.PropsWithChildren<BlockBaseFullProps & ClassNameProps>;
 
 describe('BlockBase', () => {
     test('render component by default', async () => {

src/components/ErrorWrapper/ErrorWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Button} from '@gravity-ui/uikit';
 
-import {ClassNameProps, WithChildren} from '../../models';
+import {ClassNameProps} from '../../models';
 import {block} from '../../utils';
 
 import './ErrorWrapper.scss';
@@ -24,7 +24,7 @@ const ErrorWrapper = ({
     handler,
     isError,
     children,
-}: WithChildren<ErrorWrapperProps>) =>
+}: React.PropsWithChildren<ErrorWrapperProps>) =>
     isError ? (
         <div className={b(null, className)}>
             <div className={b('text')}>{text}</div>

src/components/FileLink/FileLink.tsx

@@ -3,7 +3,7 @@ import React, {useContext} from 'react';
 import {Label, LabelProps} from '@gravity-ui/uikit';
 
 import {LocationContext} from '../../context/locationContext';
-import {FileLinkProps, TextSize, WithChildren} from '../../models';
+import {FileLinkProps, TextSize} from '../../models';
 import {block, getLinkProps} from '../../utils';
 
 import './FileLink.scss';
@@ -45,7 +45,7 @@ const LabelSizeMap: Record<TextSize, LabelProps['size']> = {
     xs: 'xs',
 };
 
-const FileLink = (props: WithChildren<FileLinkProps>) => {
+const FileLink = (props: React.PropsWithChildren<FileLinkProps>) => {
     const {hostname} = useContext(LocationContext);
     const {
         href,

src/components/Foldable/Foldable.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 
 import useHeightCalculator from '../../hooks/useHeightCalculator';
-import {QAProps, WithChildren} from '../../models';
+import {QAProps} from '../../models';
 import {block, getQaAttrubutes} from '../../utils';
 
 import './Foldable.scss';
@@ -13,7 +13,7 @@ export interface FoldableProps extends QAProps {
     className?: string;
 }
 
-const Foldable = ({isOpened, children, className, qa}: WithChildren<FoldableProps>) => {
+const Foldable = ({isOpened, children, className, qa}: React.PropsWithChildren<FoldableProps>) => {
     const qaAttributes = getQaAttrubutes(qa);
     const blockRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);

src/components/HTML/HTML.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {WithChildren} from '../../models';
 import {QAProps} from '../../models/common';
 import {hasBlockTag} from '../../utils';
 
@@ -19,7 +18,7 @@ const HTML = ({
     itemProp,
     id,
     qa,
-}: WithChildren<HTMLProps & QAProps>) => {
+}: React.PropsWithChildren<HTMLProps & QAProps>) => {
     if (!children) {
         return null;
     }

src/components/Link/Link.tsx

@@ -6,14 +6,7 @@ import {Icon} from '@gravity-ui/uikit';
 import {LocaleContext} from '../../context/localeContext';
 import {LocationContext} from '../../context/locationContext';
 import {useAnalytics} from '../../hooks';
-import {
-    ClassNameProps,
-    DefaultEventNames,
-    LinkProps,
-    Tabbable,
-    TextSize,
-    WithChildren,
-} from '../../models';
+import {ClassNameProps, DefaultEventNames, LinkProps, Tabbable, TextSize} from '../../models';
 import {QAProps} from '../../models/common';
 import {block, getLinkProps, setUrlTld} from '../../utils';
 import {getQaAttrubutes} from '../../utils/index';
@@ -40,7 +33,7 @@ function getArrowSize(size: TextSize) {
     }
 }
 
-const LinkBlock = (props: WithChildren<LinkFullProps>) => {
+const LinkBlock = (props: React.PropsWithChildren<LinkFullProps>) => {
     const {
         text,
         url,

src/components/MediaBase/MediaBase.tsx

@@ -2,7 +2,7 @@ import React, {ReactElement, useMemo} from 'react';
 
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {Col, Grid, GridColumnSize, Row} from '../../grid';
-import {MediaBaseBlockProps, WithChildren} from '../../models';
+import {MediaBaseBlockProps} from '../../models';
 import {block} from '../../utils';
 import Title from '../Title/Title';
 
@@ -12,7 +12,7 @@ import './MediaBase.scss';
 
 const b = block('media-base');
 
-const Card: React.FC<WithChildren<{}>> = () => null;
+const Card: React.FC<React.PropsWithChildren<{}>> = () => null;
 
 interface MediaBaseProps extends MediaBaseBlockProps {
     children: ReactElement;

src/components/RouterLink/RouterLink.tsx

@@ -1,14 +1,13 @@
 import React, {Fragment, useContext} from 'react';
 
 import {LocationContext} from '../../context/locationContext';
-import {WithChildren} from '../../models';
 
 export interface RouterLinkProps {
     href: string;
     [key: string]: unknown;
 }
 
-const RouterLink = ({href, children}: WithChildren<RouterLinkProps>) => {
+const RouterLink = ({href, children}: React.PropsWithChildren<RouterLinkProps>) => {
     const {Link} = useContext(LocationContext);
 
     return Link ? <Link href={href}>{children}</Link> : <Fragment>{children}</Fragment>;

src/components/UnpublishedLabel/UnpublishedLabel.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {WithChildren} from '../../models';
 import {block} from '../../utils';
 
 import {i18n} from './i18n';
@@ -20,7 +19,7 @@ const UnpublishedLabel = ({
     className,
     children,
     type = 'line',
-}: WithChildren<UnpublishedLabelProps>) => (
+}: React.PropsWithChildren<UnpublishedLabelProps>) => (
     <div className={b({type}, className)}>{children || i18n('label_non_published')}</div>
 );
 

src/containers/PageConstructor/Provider.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../context/projectSettingsContext';
 import {SSRContext, SSRContextProps} from '../../context/ssrContext';
 import {ThemeContext} from '../../context/theme';
-import {Theme, WithChildren} from '../../models';
+import {Theme} from '../../models';
 
 export interface PageConstructorProviderProps {
     isMobile?: boolean;
@@ -33,7 +33,9 @@ export interface PageConstructorProviderProps {
     image?: ImageContextProps;
 }
 
-export const PageConstructorProvider = (props: WithChildren<PageConstructorProviderProps>) => {
+export const PageConstructorProvider = (
+    props: React.PropsWithChildren<PageConstructorProviderProps>,
+) => {
     const {
         isMobile,
         mapsContext = initialMapValue,

src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx

@@ -4,11 +4,7 @@ import pick from 'lodash/pick';
 
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import {
-    BlockDecorationProps,
-    ConstructorBlock as ConstructorBlockType,
-    WithChildren,
-} from '../../../../models';
+import {BlockDecorationProps, ConstructorBlock as ConstructorBlockType} from '../../../../models';
 import {block} from '../../../../utils';
 
 import './ConstructorBlock.scss';
@@ -19,11 +15,11 @@ interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
 
 const b = block('constructor-block');
 
-export const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>> = ({
+export const ConstructorBlock = ({
     index = 0,
     data,
     children,
-}) => {
+}: React.PropsWithChildren<ConstructorBlockProps>) => {
     const {type} = data;
     const blockBaseProps = useMemo(
         () => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']),

src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx

@@ -3,14 +3,18 @@ import React, {useContext} from 'react';
 import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import {BlockType, ConstructorBlock, WithChildren} from '../../../../models';
+import {BlockType, ConstructorBlock} from '../../../../models';
 
 export interface ConstructorItemProps {
     data: ConstructorBlock;
     blockKey: string;
 }
 
-export const ConstructorItem = ({data, blockKey, children}: WithChildren<ConstructorItemProps>) => {
+export const ConstructorItem = ({
+    data,
+    blockKey,
+    children,
+}: React.PropsWithChildren<ConstructorItemProps>) => {
     const {itemMap} = useContext(InnerContext);
     const {type, ...rest} = data;
 

src/containers/PageConstructor/components/ConstructorRow/ConstructorRow.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
 import {Col, Row} from '../../../../grid';
-import {WithChildren} from '../../../../models';
 import {block} from '../../../../utils';
 
 import './ConstructorRow.scss';
 
 const b = block('constructor-row');
 
-export const ConstructorRow = ({children}: WithChildren<{}>) =>
+export const ConstructorRow = ({children}: React.PropsWithChildren<{}>) =>
     children ? (
         <Row className={b()}>
             <Col>{children}</Col>