chore: update to React 19

package.json

@@ -54,8 +54,8 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.0.0",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@gravity-ui/eslint-config": "^3.3.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
@@ -75,8 +75,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.180",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-is": "^17.0.3",
     "@types/uuid": "^9.0.4",
     "@vitejs/plugin-react": "^4.2.0",
@@ -99,10 +99,10 @@
     "postcss": "^8.4.19",
     "prettier": "^3.0.3",
     "randexp": "^0.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-final-form": "^6.5.3",
-    "react-is": "^18.2.0",
+    "react-is": "^19.2.0",
     "react-monaco-editor": "^0.46.0",
     "rimraf": "5.0.5",
     "sass": "^1.57.1",
@@ -112,16 +112,16 @@
     "stylelint": "^15.10.3",
     "stylelint-scss": "^5.1.0",
     "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5",
+    "typescript": "^5.8.4",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^7.0.0",
     "final-form": "^4.20.2",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-final-form": "^6.5.3",
-    "react-is": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react-is": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "nano-staged": {
     "*.{scss}": [

playwright/core/DynamicForm.tsx

@@ -4,7 +4,7 @@ import noop from 'lodash/noop';
 import {Form} from 'react-final-form';
 
 import {DynamicField} from '../../src/lib/core/components/Form/DynamicField';
-import {Spec} from '../../src/lib/core/types/specs';
+import type {Spec} from '../../src/lib/core/types/specs';
 import {dynamicConfig} from '../../src/lib/kit/constants/config';
 
 export const DynamicForm = ({spec}: {spec: Spec}) => {

playwright/core/DynamicView.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {DynamicView as DynamicViewBase} from '../../src/lib/core/components/View/DynamicView';
-import {Spec} from '../../src/lib/core/types/specs';
-import {FormValue} from '../../src/lib/core/types/value';
+import type {Spec} from '../../src/lib/core/types/specs';
+import type {FormValue} from '../../src/lib/core/types/value';
 import {dynamicViewConfig} from '../../src/lib/kit/constants/config';
 
 export const DynamicView = ({

playwright/core/mountFixture.tsx

@@ -6,9 +6,9 @@ import type {MountOptions} from '@playwright/experimental-ct-react';
 
 import type {MountFixture, PlaywrightFixture} from './types';
 
-export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
+export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, run) => {
     const mount = async (
-        component: JSX.Element,
+        component: React.JSX.Element,
         options?: MountOptions<JsonObject> | undefined,
         style?: React.CSSProperties | undefined,
     ) => {
@@ -31,5 +31,5 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
         );
     };
 
-    await use(mount);
+    await run(mount);
 };

playwright/core/types.ts

@@ -1,3 +1,4 @@
+import type {MountOptions} from '@playwright/experimental-ct-react';
 import type {
     Locator,
     PageScreenshotOptions,
@@ -7,7 +8,6 @@ import type {
     PlaywrightWorkerOptions,
     TestFixture,
 } from '@playwright/test';
-import type {MountOptions} from '@playwright/experimental-ct-react';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
@@ -17,12 +17,12 @@ type JsonObject = {[Key in string]?: JsonValue};
 
 interface MountResult extends Locator {
     unmount(): Promise<void>;
-    update(component: JSX.Element): Promise<void>;
+    update(component: React.JSX.Element): Promise<void>;
 }
 
 interface ComponentFixtures {
     mount<HooksConfig extends JsonObject>(
-        component: JSX.Element,
+        component: React.JSX.Element,
         options?: MountOptions<HooksConfig>,
         style?: React.CSSProperties | undefined,
     ): Promise<MountResult>;

src/lib/core/components/Form/Controller/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {FormValue, Spec} from '../../../types';
 import type {
     DynamicFormConfig,
@@ -123,7 +125,7 @@ export interface ControllerStore<
     config: DynamicFormConfig;
     tools: DynamicFormsContext['tools'];
     mutatorsStore: DynamicFormMutatorsStore;
-    render: (props: FieldRenderProps<DirtyValue>) => JSX.Element | null;
+    render: (props: FieldRenderProps<DirtyValue>) => React.JSX.Element | null;
     validate: (value?: Value) => ValidateError;
     parentOnChange:
         | ((

src/lib/core/components/Form/hooks/useSearch/useSearch.tsx

@@ -20,7 +20,7 @@ export const useSearch = (spec: Spec, value: FieldValue, name: string) => {
     const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
 
     const withSearch = React.useCallback(
-        (children: JSX.Element | null) =>
+        (children: React.JSX.Element | null) =>
             children ? <div className={b({hidden: hidden})}>{children}</div> : null,
         [hidden],
     );

src/lib/core/components/Form/types/input.ts

@@ -32,7 +32,7 @@ export type InputType<
     SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
     props: InputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type IndependentInputType<
     Value extends FieldValue,
@@ -41,7 +41,7 @@ export type IndependentInputType<
     SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
     props: IndependentInputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type InputEntity<
     Value extends FieldValue,

src/lib/core/components/Form/types/layout.ts

@@ -10,7 +10,7 @@ export type LayoutProps<
     LayoutComponentProps extends Record<string, any> | undefined = undefined,
     SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = {
-    children: React.ReactElement;
+    children: React.ReactNode;
     layoutProps?: LayoutComponentProps;
 } & Omit<InputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>, 'inputProps'>;
 
@@ -21,7 +21,7 @@ export type LayoutType<
     SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
     props: LayoutProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type LayoutsMap<
     Value extends FieldValue,

src/lib/core/components/View/hooks/useViewSharedStore.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 export const useViewSharedStore = (shared?: Record<string, any>) => {
     const firstRender = React.useRef(true);
     const [store, setStore] = React.useState(shared || {});

src/lib/core/components/View/types/layout.ts

@@ -8,12 +8,12 @@ export type ViewLayoutProps<
     Value extends FormValue,
     SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec,
 > = {
-    children: React.ReactElement;
+    children: React.ReactNode;
 } & ViewProps<Value, SpecType>;
 
 export type ViewLayoutType<Value extends FormValue, SpecType extends Spec> = (
     props: ViewLayoutProps<Value, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type ViewLayoutsMap<Value extends FormValue, SpecType extends Spec> = Record<
     string,

src/lib/core/components/View/types/views.ts

@@ -20,11 +20,11 @@ export type IndependentViewProps<Value extends FormValue, SpecType extends Spec>
 
 export type ViewType<Value extends FormValue, SpecType extends Spec> = (
     props: ViewProps<Value, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type IndependentViewType<Value extends FormValue, SpecType extends Spec> = (
     props: IndependentViewProps<Value, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type ViewEntity<Value extends FormValue, SpecType extends Spec> = {
     Component: ViewType<Value, SpecType>;

src/lib/core/types/specs.ts

@@ -1,5 +1,4 @@
 import type {AlertProps, ButtonSize, LabelProps, TextProps} from '@gravity-ui/uikit';
-import type {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 
 import type {ReadAsMethod, SpecTypes} from '../constants';
 
@@ -178,7 +177,7 @@ export interface StringSpec<
             themeLabel?: LabelProps['theme'];
             text: string;
             icon?: string;
-            iconColor?: ColorTextBaseProps['color'];
+            iconColor?: TextProps['color'];
             titleAlert?: string;
             themeAlert?: AlertProps['theme'];
             viewAlert?: AlertProps['view'];

src/lib/kit/components/Inputs/DateInput/DateInput.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 
 import type {DatePickerProps} from '@gravity-ui/date-components';
 import {DatePicker} from '@gravity-ui/date-components';
@@ -29,7 +29,7 @@ export const DateInput: React.FC<StringInputProps<DateProps>> = ({
         dateInput?.timeZone && isValidTimeZone(dateInput.timeZone) ? dateInput.timeZone : undefined;
     const outputFormat = dateInput?.outputFormat;
 
-    const onUpdate = useCallback(
+    const onUpdate = React.useCallback(
         (date: DateTime | null) => {
             if (!date) {
                 onChange(undefined as any);

src/lib/kit/components/Inputs/TextContent/__tests__/TextContent.visual.test.tsx

@@ -8,51 +8,99 @@ import {TEXT_CONTENT_SPEC} from './helpers';
 test.describe('Text Content', () => {
     test.describe('Text', () => {
         test('default', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.defaultText} />);
+            const component = await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.defaultText} />);
+
+            await component
+                .locator(
+                    '.g-text.g-text_variant_body-1.g-color-text.g-color-text_color_warning.df-text-content__icon',
+                )
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout row', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutRow} />);
+            const component = await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutRow} />);
+
+            await component
+                .locator(
+                    '.g-text.g-text_variant_body-1.g-color-text.g-color-text_color_warning.df-text-content__icon',
+                )
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout row verbose', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutRowVerbose} />);
+            const component = await mount(
+                <DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutRowVerbose} />,
+            );
+
+            await component
+                .locator(
+                    '.g-text.g-text_variant_body-1.g-color-text.g-color-text_color_warning.df-text-content__icon',
+                )
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout transparent', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutTransparent} />);
+            const component = await mount(
+                <DynamicForm spec={TEXT_CONTENT_SPEC.textLayoutTransparent} />,
+            );
+
+            await component
+                .locator(
+                    '.g-text.g-text_variant_body-1.g-color-text.g-color-text_color_warning.df-text-content__icon',
+                )
+                .waitFor();
 
             await expectScreenshot();
         });
     });
 
     test.describe('Label', () => {
         test('default', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.defaultLabel} />);
+            const component = await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.defaultLabel} />);
+
+            await component
+                .locator('.g-label__addon.g-label__addon_side_start.g-label__addon_type_icon svg')
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout row', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutRow} />);
+            const component = await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutRow} />);
+
+            await component
+                .locator('.g-label__addon.g-label__addon_side_start.g-label__addon_type_icon svg')
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout row verbose', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutRowVerbose} />);
+            const component = await mount(
+                <DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutRowVerbose} />,
+            );
+
+            await component
+                .locator('.g-label__addon.g-label__addon_side_start.g-label__addon_type_icon svg')
+                .waitFor();
 
             await expectScreenshot();
         });
 
         test('layout transparent', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutTransparent} />);
+            const component = await mount(
+                <DynamicForm spec={TEXT_CONTENT_SPEC.labelLayoutTransparent} />,
+            );
+
+            await component
+                .locator('.g-label__addon.g-label__addon_side_start.g-label__addon_type_icon svg')
+                .waitFor();
 
             await expectScreenshot();
         });
@@ -64,7 +112,13 @@ test.describe('Text Content', () => {
         });
 
         test('default value', async ({mount, expectScreenshot}) => {
-            await mount(<DynamicForm spec={TEXT_CONTENT_SPEC.labelDefaultValue} />);
+            const component = await mount(
+                <DynamicForm spec={TEXT_CONTENT_SPEC.labelDefaultValue} />,
+            );
+
+            await component
+                .locator('.g-label__addon.g-label__addon_side_start.g-label__addon_type_icon svg')
+                .waitFor();
 
             await expectScreenshot();
         });

src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Text} from '@gravity-ui/uikit';
 
 export const filterTimeArray = (
-    times: {id: string; value: string; content: string | JSX.Element; key: string}[],
+    times: {id: string; value: string; content: string | React.JSX.Element; key: string}[],
     cutoff: string,
     direction: 'greater' | 'less',
 ) => {

src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx

@@ -23,7 +23,7 @@ export const Accordeon = <
     input,
     meta,
     children,
-}: T): JSX.Element => {
+}: T): React.JSX.Element => {
     const {variantTitle} = spec.viewSpec.layoutProps || {};
 
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));

src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.tsx

@@ -18,7 +18,7 @@ export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps
     input,
     children,
     meta,
-}: T): JSX.Element => {
+}: T): React.JSX.Element => {
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
 
     const onDrop = React.useCallback(() => {