feat: migrate to uikit_v8

.storybook/decorators/withTheme.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import type {DecoratorFn} from '@storybook/react';
 
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 
 import '@gravity-ui/uikit/styles/styles.scss';
 import './styles.scss';
 
 export const withTheme: DecoratorFn = (Story, context) => (
-    <ThemeProvider theme={context.globals.theme}>
+    <Provider theme={context.globals.theme} lang={context.globals.lang}>
         <Story {...context} />
-    </ThemeProvider>
+    </Provider>
 );

package.json

@@ -49,9 +49,12 @@
     "@gravity-ui/date-utils": "^2.7.1",
     "@gravity-ui/i18n": "^1.8.0",
     "@gravity-ui/icons": "^2.22.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "decimal.js": "^10.6.0",
     "json-schema-library": "^11.6.2",
     "lodash": "^4.18.1",
+    "react-virtualized-auto-sizer": "^1.0.26",
+    "react-window": "^1.8.11",
     "uuid": "^14.0.1"
   },
   "devDependencies": {
@@ -63,7 +66,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.41.0",
+    "@gravity-ui/uikit": "8.0.0-beta.1",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^8.6.4",
@@ -116,12 +119,12 @@
     "typescript": "^5.8.4"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^7.0.0",
+    "@gravity-ui/uikit": "^8.0.0-beta.1",
     "final-form": "^4.20.2",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "react-final-form": "^6.5.3",
-    "react-is": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react-is": "^18.0.0 || ^19.0.0"
   },
   "nano-staged": {
     "*.{scss}": [

playwright/playwright/index.tsx

@@ -1,27 +1,19 @@
 import React from 'react';
 
+import {Provider, Toaster, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
-import {
-    MobileProvider,
-    ThemeProvider,
-    Toaster,
-    ToasterComponent,
-    ToasterProvider,
-} from '@gravity-ui/uikit';
 
 import './index.scss';
 
 const toaster = new Toaster();
 
 beforeMount(async ({App}) => {
     return (
-        <ThemeProvider>
-            <MobileProvider>
-                <ToasterProvider toaster={toaster}>
-                    <App />
-                    <ToasterComponent />
-                </ToasterProvider>
-            </MobileProvider>
-        </ThemeProvider>
+        <Provider>
+            <ToasterProvider toaster={toaster}>
+                <App />
+                <ToasterComponent />
+            </ToasterProvider>
+        </Provider>
     );
 });

src/lib/core/components/Form/__tests__/DynamicField.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 import {act, render} from '@testing-library/react';
 import type {FormApi} from 'final-form';
 import noop from 'lodash/noop';
@@ -163,7 +163,7 @@ test('Form/hooks/DynamicField', () => {
     let form = null as FormApi | null;
 
     render(
-        <ThemeProvider>
+        <Provider>
             <Form initialValues={{}} onSubmit={noop}>
                 {() => {
                     const Caller = () => {
@@ -185,7 +185,7 @@ test('Form/hooks/DynamicField', () => {
                     );
                 }}
             </Form>
-        </ThemeProvider>,
+        </Provider>,
     );
 
     const value = {
@@ -443,11 +443,11 @@ test('warns about spec property keys containing dots', () => {
     };
 
     render(
-        <ThemeProvider>
+        <Provider>
             <Form initialValues={{}} onSubmit={noop}>
                 {() => <DynamicField name={name} spec={dottedSpec} config={dynamicConfig} />}
             </Form>
-        </ThemeProvider>,
+        </Provider>,
     );
 
     expect(warn).toHaveBeenCalledTimes(1);
@@ -464,11 +464,11 @@ test('does not warn when spec property keys have no dots', () => {
     const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
     render(
-        <ThemeProvider>
+        <Provider>
             <Form initialValues={{}} onSubmit={noop}>
                 {() => <DynamicField name={name} spec={spec} config={dynamicConfig} />}
             </Form>
-        </ThemeProvider>,
+        </Provider>,
     );
 
     expect(warn).not.toHaveBeenCalled();

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Provider} from '@gravity-ui/uikit';
 import {render} from '@testing-library/react';
 import noop from 'lodash/noop';
 import {Form} from 'react-final-form';
@@ -56,6 +57,7 @@ describe('Form/hooks/useSearch', () => {
                     />
                 )}
             </Form>,
+            {wrapper: Provider},
         );
 
         expect(mirror.field.useSearchStore?.store).toMatchObject({

src/lib/kit/components/Card/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {ArraySpec, FormValue, ObjectSpec} from '../../../../core';
-import {SpecTypes} from '../../../../core';
+import {SpecTypes} from '../../../../core/constants';
 
 export const ACCORDEON_CARD: Record<string, ArraySpec | ObjectSpec> = {
     arraySpec: {

src/lib/kit/components/Inputs/ArrayBase/__tests__/helpers.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {DynamicForm as BaseDynamicForm} from '~playwright/core/DynamicForm';
 
 import type {ArraySpec, FormValue, Spec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const ARRAY_BASE: Record<string, ArraySpec> = {
     default: {

src/lib/kit/components/Inputs/CardOneOf/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, ObjectSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const CARD_ONEOF: Record<string, ObjectSpec> = {
     default: {

src/lib/kit/components/Inputs/Checkbox/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {BooleanSpec, FormValue} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const CHECKBOX: Record<string, BooleanSpec> = {
     default: {

src/lib/kit/components/Inputs/CheckboxGroup/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {ArraySpec, FormValue} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const CHECKBOX_GROUP: Record<string, ArraySpec> = {
     default: {

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

@@ -1,26 +1,17 @@
 import React from 'react';
 
-import {unstable_ColorPicker as ColorPickerBase} from '@gravity-ui/uikit/unstable';
+import {ColorPicker as ColorPickerBase} from '@gravity-ui/uikit';
 
 import type {StringInput} from '../../../../core';
 
 /**
- * Props forwarded to the underlying `unstable_ColorPicker` from `@gravity-ui/uikit/unstable`.
- *
- * NOTE: The underlying uikit component is marked as **unstable** — its API and behavior
- * may change in future uikit releases without following semver. Use with that in mind.
- *
- * @see https://preview.gravity-ui.com/uikit/?path=/docs/lab-colorpicker--docs
+ * Props forwarded to the underlying `ColorPicker` from `@gravity-ui/uikit`.
  */
 export interface ColorPickerProps
     extends Omit<React.ComponentProps<typeof ColorPickerBase>, 'value' | 'onUpdate' | 'disabled'> {}
 
 /**
  * Dynamic-forms input that renders a color picker for `StringSpec`.
- *
- * Wraps `unstable_ColorPicker` from `@gravity-ui/uikit/unstable`. Because the underlying
- * uikit component is **unstable**, the visual appearance, available `inputProps`, and
- * supported color formats may change between uikit releases.
  */
 export const ColorPicker: StringInput<ColorPickerProps> = ({input, spec, inputProps}) => {
     const {value, onChange, onBlur, onFocus} = input;

src/lib/kit/components/Inputs/ColorPicker/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, StringSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const COLOR_PICKER: Record<string, StringSpec> = {
     default: {

src/lib/kit/components/Inputs/DateInput/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, StringSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const DATE_INPUT: Record<string, StringSpec> = {
     default: {

src/lib/kit/components/Inputs/FileInput/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, StringSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const FILE_INPUT: Record<string, StringSpec> = {
     default: {

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx

@@ -52,14 +52,23 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
         onClose();
     }, [onChange, onClose, value]);
 
+    const handleOpenChange = React.useCallback(
+        (open: boolean) => {
+            if (!open) {
+                handleClose();
+            }
+        },
+        [handleClose],
+    );
+
     const options = useMonacoOptions(fontSize, false);
 
     if (!MonacoEditor) {
         return null;
     }
 
     return (
-        <Dialog open={visible} onClose={handleClose} className={b()}>
+        <Dialog open={visible} onOpenChange={handleOpenChange} className={b()}>
             <Dialog.Header caption={title} className={b('dialog-header')} />
             <Dialog.Body>
                 <div className={b('container')} data-qa={`${name}-dialog`}>

src/lib/kit/components/Inputs/MultiOneOf/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, ObjectSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const MULTI_ONEOF: Record<string, ObjectSpec> = {
     default: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {SelectProps as SelectBaseProps} from '@gravity-ui/uikit';
+import type {SelectProps as SelectBaseProps, SelectOptionProps} from '@gravity-ui/uikit';
 import {Select, Text} from '@gravity-ui/uikit';
 
 import type {ArrayInput, FieldArrayValue} from '../../../../core';
@@ -44,7 +44,6 @@ export const MultiSelect: ArrayInput<MultiSelectProps> = ({name, input, spec, in
                       return {
                           id: value,
                           value,
-                          text,
                           content: spec.viewSpec.selectParams?.meta?.[value] ? (
                               <div key={value}>
                                   <Text>{text}</Text>
@@ -71,6 +70,11 @@ export const MultiSelect: ArrayInput<MultiSelectProps> = ({name, input, spec, in
         return <React.Fragment key={option.value}>{option.content || option.value}</React.Fragment>;
     }, []);
 
+    const getOptionText: SelectBaseProps['getOptionText'] = React.useCallback(
+        (option: SelectOptionProps) => spec.description?.[option.value] || option.value,
+        [spec.description],
+    );
+
     const getOptionHeight = React.useCallback(() => {
         if (spec.viewSpec.selectParams?.meta) {
             return 44;
@@ -118,6 +122,7 @@ export const MultiSelect: ArrayInput<MultiSelectProps> = ({name, input, spec, in
             filterable={filterable}
             renderOption={renderOption}
             getOptionHeight={getOptionHeight}
+            getOptionText={withCustomOptions ? undefined : getOptionText}
             {...inputProps}
             value={_value}
             options={options}

src/lib/kit/components/Inputs/MultiSelect/__tests__/MultiSelect.number-enum.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 import {render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import noop from 'lodash/noop';
@@ -34,7 +34,7 @@ const renderNumberEnum = (values: number[], initialValue: number[] | undefined =
     };
 
     render(
-        <ThemeProvider>
+        <Provider>
             <Form initialValues={{input: initialValue}} onSubmit={noop}>
                 {({values}) => (
                     <>
@@ -43,7 +43,7 @@ const renderNumberEnum = (values: number[], initialValue: number[] | undefined =
                     </>
                 )}
             </Form>
-        </ThemeProvider>,
+        </Provider>,
     );
 
     return screen.getByText('3');

src/lib/kit/components/Inputs/MultiSelect/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {ArraySpec, FormValue} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const MULTI_SELECT: Record<string, ArraySpec> = {
     default: {

src/lib/kit/components/Inputs/Number/__tests__/Number.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import cloneDeep from 'lodash/cloneDeep';
@@ -27,11 +27,11 @@ const SPEC_NUMBER: NumberSpec = {
 };
 
 const DynamicForm = ({spec}: {spec: Spec}) => (
-    <ThemeProvider>
+    <Provider>
         <Form initialValues={{}} onSubmit={noop}>
             {() => <DynamicField name={NAME} spec={spec} config={dynamicConfig} />}
         </Form>
-    </ThemeProvider>
+    </Provider>
 );
 
 beforeEach(() => {

src/lib/kit/components/Inputs/Number/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {NumberSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const NUMBER_SPEC: Record<string, NumberSpec> = {
     default: {

src/lib/kit/components/Inputs/NumberWithScale/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, StringSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const NUMBER_WITH_SCALE: Record<string, StringSpec> = {
     default: {

src/lib/kit/components/Inputs/ObjectBase/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, ObjectSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const OBJECT_BASE: Record<string, ObjectSpec> = {
     default: {

src/lib/kit/components/Inputs/ObjectValueInput/__tests__/helpers.ts

@@ -1,5 +1,5 @@
 import type {FormValue, ObjectSpec} from '../../../../../core';
-import {SpecTypes} from '../../../../../core';
+import {SpecTypes} from '../../../../../core/constants';
 
 export const OBJECT_VALUE_INPUT: Record<string, ObjectSpec> = {
     default: {