From d4f671756f97839ccc773ecf0ee770a91bb1d853 Mon Sep 17 00:00:00 2001 From: Su9DenLY Date: Tue, 6 Oct 2026 19:34:57 +0300 Subject: [PATCH 1/7] feat: migrate to uikit_v8 --- package-lock.json | 54 ++++++------------- package.json | 16 +++--- .../Inputs/ColorPicker/ColorPicker.tsx | 13 +---- .../Inputs/MonacoInput/MonacoInputDialog.tsx | 11 +++- .../Inputs/MultiSelect/MultiSelect.tsx | 9 +++- .../kit/components/Inputs/Select/Select.tsx | 9 +++- .../TableArrayInput/TableArrayInput.tsx | 3 +- .../components/RemoveButton/RemoveButton.tsx | 4 +- .../MonacoInputView/MonacoViewDialog.tsx | 11 +++- .../Views/TableArrayView/TableArrayView.tsx | 3 +- .../kit/components/DropButton/DropButton.tsx | 7 +-- .../EntityDescription/EntityDescription.tsx | 2 +- src/lib/unstable/kit/entities/Alert/Alert.tsx | 9 +--- .../unstable/kit/entities/Monaco/Monaco.tsx | 2 +- .../ColorPickerInput/ColorPickerInput.tsx | 5 +- .../MultiSelectInput/MultiSelectInput.tsx | 21 ++++++-- .../form-entities/SelectInput/SelectInput.tsx | 21 ++++++-- tsconfig.json | 3 +- tsconfig.publish.json | 3 +- 19 files changed, 110 insertions(+), 96 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a54962c..7498b641 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,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": { @@ -81,12 +84,12 @@ "typescript": "^5.8.4" }, "peerDependencies": { - "@gravity-ui/uikit": "^7.0.0", + "@gravity-ui/uikit": "^8.0.0", "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" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2197,7 +2200,6 @@ "version": "7.28.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -3627,7 +3629,6 @@ "version": "18.0.1", "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz", "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==", - "dev": true, "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.26.7", @@ -6366,7 +6367,6 @@ "version": "0.0.6", "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", - "dev": true, "license": "MIT" }, "node_modules/@types/uuid": { @@ -9307,7 +9307,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", - "dev": true, "license": "MIT", "dependencies": { "tiny-invariant": "^1.0.6" @@ -17685,8 +17684,7 @@ "node_modules/memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==", - "dev": true + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" }, "node_modules/memoizerific": { "version": "1.11.3", @@ -19639,7 +19637,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", - "dev": true, "license": "MIT" }, "node_modules/randexp": { @@ -19848,7 +19845,6 @@ "version": "9.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", - "dev": true, "license": "MIT", "dependencies": { "@types/use-sync-external-store": "^0.0.6", @@ -19888,7 +19884,6 @@ "version": "1.0.26", "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz", "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==", - "dev": true, "license": "MIT", "peerDependencies": { "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0", @@ -19899,7 +19894,7 @@ "version": "1.8.11", "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz", "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==", - "dev": true, + "license": "MIT", "dependencies": { "@babel/runtime": "^7.0.0", "memoize-one": ">=3.1.1 <6" @@ -20024,7 +20019,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "dev": true, "license": "MIT" }, "node_modules/reflect.getprototypeof": { @@ -22418,7 +22412,6 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "dev": true, "license": "MIT" }, "node_modules/tinyexec": { @@ -23160,7 +23153,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", - "dev": true, "license": "MIT", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" @@ -25857,8 +25849,7 @@ "@babel/runtime": { "version": "7.28.4", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", - "dev": true + "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==" }, "@babel/template": { "version": "7.26.9", @@ -26728,7 +26719,6 @@ "version": "18.0.1", "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz", "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==", - "dev": true, "requires": { "@babel/runtime": "^7.26.7", "css-box-model": "^1.2.1", @@ -28589,8 +28579,7 @@ "@types/use-sync-external-store": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", - "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", - "dev": true + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==" }, "@types/uuid": { "version": "9.0.4", @@ -30679,7 +30668,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", - "dev": true, "requires": { "tiny-invariant": "^1.0.6" } @@ -36983,8 +36971,7 @@ "memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==", - "dev": true + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" }, "memoizerific": { "version": "1.11.3", @@ -38394,8 +38381,7 @@ "raf-schd": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", - "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", - "dev": true + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" }, "randexp": { "version": "0.5.3", @@ -38546,7 +38532,6 @@ "version": "9.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", - "dev": true, "requires": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -38567,14 +38552,12 @@ "react-virtualized-auto-sizer": { "version": "1.0.26", "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz", - "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==", - "dev": true + "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==" }, "react-window": { "version": "1.8.11", "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz", "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==", - "dev": true, "requires": { "@babel/runtime": "^7.0.0", "memoize-one": ">=3.1.1 <6" @@ -38660,8 +38643,7 @@ "redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", - "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "dev": true + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" }, "reflect.getprototypeof": { "version": "1.0.10", @@ -40433,8 +40415,7 @@ "tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "dev": true + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" }, "tinyexec": { "version": "1.0.2", @@ -40967,8 +40948,7 @@ "use-sync-external-store": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", - "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", - "dev": true + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==" }, "util": { "version": "0.12.5", diff --git a/package.json b/package.json index 9206683d..21320a36 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "homepage": "https://github.com/gravity-ui/dynamic-forms#readme", "scripts": { - "prepare": "husky install", + "prepare": "husky install && npm run setup:uikit-next", "lint": "run-p lint:*", "lint:js": "eslint src --quiet", "lint:prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,css,scss}'", @@ -41,7 +41,8 @@ "playwright:clear-cache": "rm -rf ./playwright/.cache", "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'", "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'", - "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache" + "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache", + "setup:uikit-next": "bash scripts/prepare-uikit-next.sh" }, "dependencies": { "@bem-react/classname": "^1.8.0", @@ -49,9 +50,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": { @@ -116,12 +120,12 @@ "typescript": "^5.8.4" }, "peerDependencies": { - "@gravity-ui/uikit": "^7.0.0", + "@gravity-ui/uikit": "^8.0.0", "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}": [ diff --git a/src/lib/kit/components/Inputs/ColorPicker/ColorPicker.tsx b/src/lib/kit/components/Inputs/ColorPicker/ColorPicker.tsx index dafac9ed..2136ab94 100644 --- a/src/lib/kit/components/Inputs/ColorPicker/ColorPicker.tsx +++ b/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, '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 = ({input, spec, inputProps}) => { const {value, onChange, onBlur, onFocus} = input; diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx index be39f6bc..b4d2bd91 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx @@ -52,6 +52,15 @@ export const MonacoInputDialog: React.FC = ({ onClose(); }, [onChange, onClose, value]); + const handleOpenChange = React.useCallback( + (open: boolean) => { + if (!open) { + handleClose(); + } + }, + [handleClose], + ); + const options = useMonacoOptions(fontSize, false); if (!MonacoEditor) { @@ -59,7 +68,7 @@ export const MonacoInputDialog: React.FC = ({ } return ( - +
diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx index 2792829a..bd43393a 100644 --- a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx +++ b/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, SelectOption} 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 = ({name, input, spec, in return { id: value, value, - text, content: spec.viewSpec.selectParams?.meta?.[value] ? (
{text} @@ -71,6 +70,11 @@ export const MultiSelect: ArrayInput = ({name, input, spec, in return {option.content || option.value}; }, []); + const getOptionText: SelectBaseProps['getOptionText'] = React.useCallback( + (option: SelectOption) => 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 = ({name, input, spec, in filterable={filterable} renderOption={renderOption} getOptionHeight={getOptionHeight} + getOptionText={withCustomOptions ? undefined : getOptionText} {...inputProps} value={_value} options={options} diff --git a/src/lib/kit/components/Inputs/Select/Select.tsx b/src/lib/kit/components/Inputs/Select/Select.tsx index cf90651f..622a02b0 100644 --- a/src/lib/kit/components/Inputs/Select/Select.tsx +++ b/src/lib/kit/components/Inputs/Select/Select.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type {SelectProps as SelectBaseProps} from '@gravity-ui/uikit'; +import type {SelectProps as SelectBaseProps, SelectOption} from '@gravity-ui/uikit'; import {Select as SelectBase, Text} from '@gravity-ui/uikit'; import type {StringInput} from '../../../../core'; @@ -38,7 +38,6 @@ export const Select: StringInput = ({name, input, spec, inputProps} : spec.enum?.map((id) => ({ id, value: id, - text: spec.description?.[id] || id, content: spec.viewSpec.selectParams?.meta?.[id] ? (
{spec.description?.[id] || id} @@ -64,6 +63,11 @@ export const Select: StringInput = ({name, input, spec, inputProps} return {option.content || option.value}; }, []); + const getOptionText: SelectBaseProps['getOptionText'] = React.useCallback( + (option: SelectOption) => spec.description?.[option.value] || option.value, + [spec.description], + ); + const getOptionHeight = React.useCallback(() => { if (spec.viewSpec.selectParams?.meta) { return 44; @@ -91,6 +95,7 @@ export const Select: StringInput = ({name, input, spec, inputProps} width="max" filterable={filterable} getOptionHeight={getOptionHeight} + getOptionText={withCustomOptions ? undefined : getOptionText} renderOption={renderOption} {...inputProps} value={[value]} diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx index 8bbfb9d3..070d66ad 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx @@ -1,7 +1,8 @@ import React from 'react'; import {Plus, TrashBin} from '@gravity-ui/icons'; -import {Button, Flex, HelpMark, Icon, Table, type TableColumnConfig} from '@gravity-ui/uikit'; +import {Button, Flex, HelpMark, Icon} from '@gravity-ui/uikit'; +import {Table, type TableColumnConfig} from '@gravity-ui/uikit/legacy'; import noop from 'lodash/noop'; import set from 'lodash/set'; diff --git a/src/lib/kit/components/RemoveButton/RemoveButton.tsx b/src/lib/kit/components/RemoveButton/RemoveButton.tsx index bc4e3221..88e9ac99 100644 --- a/src/lib/kit/components/RemoveButton/RemoveButton.tsx +++ b/src/lib/kit/components/RemoveButton/RemoveButton.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {Ellipsis} from '@gravity-ui/icons'; -import type {DropdownMenuItemMixed} from '@gravity-ui/uikit'; -import {Button, DropdownMenu, Icon} from '@gravity-ui/uikit'; +import {Button, Icon} from '@gravity-ui/uikit'; +import {DropdownMenu, type DropdownMenuItemMixed} from '@gravity-ui/uikit/legacy'; import i18n from '../../i18n'; diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx index f556dcd5..7133c6fa 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.tsx @@ -41,6 +41,15 @@ export const MonacoViewDialog: React.FC = ({ onClose(); }, [onClose]); + const handleOpenChange = React.useCallback( + (open: boolean) => { + if (!open) { + handleClose(); + } + }, + [handleClose], + ); + const options = useMonacoOptions(fontSize, true); if (!MonacoEditor) { @@ -48,7 +57,7 @@ export const MonacoViewDialog: React.FC = ({ } return ( - +
diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx index 871aa121..80ca9381 100644 --- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx +++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import {Flex, HelpMark, Table, type TableColumnConfig} from '@gravity-ui/uikit'; +import {Flex, HelpMark} from '@gravity-ui/uikit'; +import {Table, type TableColumnConfig} from '@gravity-ui/uikit/legacy'; import type {ArrayView, FormValue, ObjectValue} from '../../../../core'; import { diff --git a/src/lib/unstable/kit/components/DropButton/DropButton.tsx b/src/lib/unstable/kit/components/DropButton/DropButton.tsx index f392188b..d001863b 100644 --- a/src/lib/unstable/kit/components/DropButton/DropButton.tsx +++ b/src/lib/unstable/kit/components/DropButton/DropButton.tsx @@ -1,11 +1,6 @@ import React from 'react'; -import {Text} from '@gravity-ui/uikit'; -import { - unstable_Menu as Menu, - unstable_MenuItem as MenuItem, - unstable_MenuTrigger as MenuTrigger, -} from '@gravity-ui/uikit/unstable'; +import {Menu, MenuItem, MenuTrigger, Text} from '@gravity-ui/uikit'; import {useForm} from 'react-final-form'; import i18n from '../../../../kit/i18n'; diff --git a/src/lib/unstable/kit/components/EntityDescription/EntityDescription.tsx b/src/lib/unstable/kit/components/EntityDescription/EntityDescription.tsx index 003a9df8..8c67c434 100644 --- a/src/lib/unstable/kit/components/EntityDescription/EntityDescription.tsx +++ b/src/lib/unstable/kit/components/EntityDescription/EntityDescription.tsx @@ -26,7 +26,7 @@ export const EntityDescription: React.FC = ({ if (likeHelpMark) { return ( - + ); diff --git a/src/lib/unstable/kit/entities/Alert/Alert.tsx b/src/lib/unstable/kit/entities/Alert/Alert.tsx index 263bc9ce..9b587625 100644 --- a/src/lib/unstable/kit/entities/Alert/Alert.tsx +++ b/src/lib/unstable/kit/entities/Alert/Alert.tsx @@ -100,14 +100,7 @@ export const Alert: NodeEntity = ({props, schema, return ( - + ); }; diff --git a/src/lib/unstable/kit/entities/Monaco/Monaco.tsx b/src/lib/unstable/kit/entities/Monaco/Monaco.tsx index b29c8902..53a4e122 100644 --- a/src/lib/unstable/kit/entities/Monaco/Monaco.tsx +++ b/src/lib/unstable/kit/entities/Monaco/Monaco.tsx @@ -170,7 +170,7 @@ export const Monaco: NodeEntity = ({ > {control} - + ( - - {option.content || option.text || option.value} - + {option.content || option.value} ), [], ); + const getOptionText: SelectProps['getOptionText'] = React.useCallback( + (option: SelectOption) => option.data?.text ?? getSelectOptionText(option), + [], + ); + const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( (option: SelectOption) => { let height = 28; @@ -116,6 +126,7 @@ export const MultiSelectInput: NodeEntity 9} renderOption={renderOption} getOptionHeight={getOptionHeight} + getOptionText={getOptionText} placeholder={`${schema.examples?.[0]?.[0] || DASH}`} disabled={disabled || schema.readOnly} size={settings?.size} diff --git a/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx b/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx index 13279fac..c9a2fee2 100644 --- a/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx +++ b/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx @@ -1,6 +1,13 @@ import React from 'react'; -import {Flex, Select, type SelectOption, type SelectProps, Text} from '@gravity-ui/uikit'; +import { + Flex, + Select, + type SelectOption, + type SelectProps, + Text, + getSelectOptionText, +} from '@gravity-ui/uikit'; import isString from 'lodash/isString'; import type {JsonSchemaString, NodeEntity} from '../../../core'; @@ -62,20 +69,23 @@ export const SelectInput: NodeEntity = ({ ); } - return {value, text, content, key: value, data: {optionMeta}}; + return {value, content, key: value, data: {optionMeta, text}}; }), [enumDescriptions, optionsMeta, schema.enum, settings], ); const renderOption: SelectProps['renderOption'] = React.useCallback( (option: SelectOption) => ( - - {option.content || option.text || option.value} - + {option.content || option.value} ), [], ); + const getOptionText: SelectProps['getOptionText'] = React.useCallback( + (option: SelectOption) => option.data?.text ?? getSelectOptionText(option), + [], + ); + const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( (option: SelectOption) => { let height = 28; @@ -114,6 +124,7 @@ export const SelectInput: NodeEntity = ({ filterable={(schema.enum?.length || 0) > 9} renderOption={renderOption} getOptionHeight={getOptionHeight} + getOptionText={getOptionText} placeholder={schema.examples?.[0] || DASH} disabled={disabled || schema.readOnly} size={settings?.size} diff --git a/tsconfig.json b/tsconfig.json index 7eba7790..3f8660b6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,8 @@ "paths": { "~playwright/*": ["playwright/*"], "@gravity-ui/dynamic-forms/unstable": ["./src/unstable.ts"], - "@gravity-ui/uikit/unstable": ["node_modules/@gravity-ui/uikit/build/esm/unstable"] + "@gravity-ui/uikit/unstable": ["node_modules/@gravity-ui/uikit/build/esm/unstable"], + "@gravity-ui/uikit/legacy": ["node_modules/@gravity-ui/uikit/build/esm/legacy"] } } } diff --git a/tsconfig.publish.json b/tsconfig.publish.json index be7e2997..ead2d47e 100644 --- a/tsconfig.publish.json +++ b/tsconfig.publish.json @@ -13,7 +13,8 @@ "importHelpers": true, "paths": { "@gravity-ui/dynamic-forms/unstable": ["./src/unstable.ts"], - "@gravity-ui/uikit/unstable": ["node_modules/@gravity-ui/uikit/build/esm/unstable"] + "@gravity-ui/uikit/unstable": ["node_modules/@gravity-ui/uikit/build/esm/unstable"], + "@gravity-ui/uikit/legacy": ["node_modules/@gravity-ui/uikit/build/esm/legacy"] } } } From b5b13010af7094889d104f9729b3baf6f838d87a Mon Sep 17 00:00:00 2001 From: Su9DenLY Date: Thu, 8 Oct 2026 10:58:43 +0300 Subject: [PATCH 2/7] fix: update UIKit 8 migration and preview build --- .storybook/decorators/withTheme.tsx | 6 ++--- playwright/playwright/index.tsx | 22 +++++----------- scripts/prepare-uikit-next.sh | 26 +++++++++++++++++++ .../Inputs/MultiSelect/MultiSelect.tsx | 4 +-- .../kit/components/Inputs/Select/Select.tsx | 4 +-- .../TableArrayInput/TableArrayInput.tsx | 2 +- .../TimeRangeSelect/TimeRangeSelect.tsx | 4 +-- .../Views/TableArrayView/TableArrayView.tsx | 2 +- .../EntityContainer/EntityContainer.tsx | 2 +- .../MonacoContainer/MonacoContainer.tsx | 2 +- src/lib/unstable/kit/entities/Alert/Alert.tsx | 2 +- .../kit/entities/ArrayEntity/ArrayEntity.tsx | 2 +- .../kit/entities/ArrayTable/ArrayTable.tsx | 2 +- .../entities/ObjectInline/ObjectInline.tsx | 2 +- .../CheckboxGroupInput/CheckboxGroupInput.tsx | 2 +- .../kit/form-entities/FileInput/FileInput.tsx | 7 ++--- .../MultiSelectInput/MultiSelectInput.tsx | 10 +++---- .../NumberWithScaleInput.tsx | 2 +- .../form-entities/RangeInput/RangeInput.tsx | 2 +- .../form-entities/SelectInput/SelectInput.tsx | 10 +++---- .../StringNumberWithScaleInput.tsx | 2 +- .../form-layouts/FormColumn/FormColumn.tsx | 6 ++--- .../kit/form-layouts/FormRow/FormRow.tsx | 11 +++++--- .../kit/layouts/Accordeon/Accordeon.tsx | 4 +-- src/lib/unstable/kit/layouts/Card/Card.tsx | 8 ++++-- .../unstable/kit/layouts/Section/Section.tsx | 10 +++---- .../kit/layouts/Transparent/Transparent.tsx | 4 +-- .../ColorPickerValue/ColorPickerValue.tsx | 2 +- .../NumberWithScaleValue.tsx | 2 +- .../PrimitiveArrayValue.tsx | 2 +- .../RangeValue/RangeValue.tsx | 8 +++++- .../StringNumberWithScaleValue.tsx | 2 +- .../OverviewColumn/OverviewColumn.tsx | 13 +++++++--- .../OverviewRow/OverviewRow.tsx | 6 ++--- src/stories/StringColorPicker.stories.tsx | 11 ++------ src/stories/components/Editor/Editor.tsx | 2 +- .../EntityPreview/EntityPreview.tsx | 19 +++++++++----- tsconfig.json | 1 - tsconfig.publish.json | 1 - 39 files changed, 132 insertions(+), 97 deletions(-) create mode 100644 scripts/prepare-uikit-next.sh diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx index 69eebfb0..587c6478 100644 --- a/.storybook/decorators/withTheme.tsx +++ b/.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) => ( - + - + ); diff --git a/playwright/playwright/index.tsx b/playwright/playwright/index.tsx index ec55afd1..a899f24e 100644 --- a/playwright/playwright/index.tsx +++ b/playwright/playwright/index.tsx @@ -1,13 +1,7 @@ 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'; @@ -15,13 +9,11 @@ const toaster = new Toaster(); beforeMount(async ({App}) => { return ( - - - - - - - - + + + + + + ); }); diff --git a/scripts/prepare-uikit-next.sh b/scripts/prepare-uikit-next.sh new file mode 100644 index 00000000..4e516b20 --- /dev/null +++ b/scripts/prepare-uikit-next.sh @@ -0,0 +1,26 @@ +#!/usr/bin/env bash +set -euo pipefail + +# Temporary development bootstrap until UIKit 8 is published. Remove this script +# and its prepare hook when replacing the devDependency with the released v8. +UIKIT_REF=c34f268e40bd5763dead8dfcad23eec2de1a878d +PROJECT_DIR=$(cd "$(dirname "$0")/.." && pwd) +BUILD_DIR=$(mktemp -d "${TMPDIR:-/tmp}/dynamic-forms-uikit-next.XXXXXX") +trap 'rm -rf "$BUILD_DIR"' EXIT + +echo "Building @gravity-ui/uikit from next commit $UIKIT_REF" +git init --quiet "$BUILD_DIR/uikit" +git -C "$BUILD_DIR/uikit" fetch --quiet --depth=1 https://github.com/gravity-ui/uikit.git "$UIKIT_REF" +git -C "$BUILD_DIR/uikit" checkout --quiet --detach FETCH_HEAD +test "$(git -C "$BUILD_DIR/uikit" rev-parse HEAD)" = "$UIKIT_REF" + +cd "$BUILD_DIR/uikit" +npm ci --ignore-scripts --no-audit --no-fund +npm run build +npm pack --quiet --ignore-scripts --pack-destination "$BUILD_DIR" + +cd "$PROJECT_DIR" +# --no-save preserves the committed manifests/lockfile. Do not use +# --package-lock=false: it re-resolves unrelated dependencies as well. +npm install --no-save --ignore-scripts --no-audit --no-fund "$BUILD_DIR"/*.tgz +echo "Installed @gravity-ui/uikit from next commit $UIKIT_REF" diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx index bd43393a..19fd7a82 100644 --- a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx +++ b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type {SelectProps as SelectBaseProps, SelectOption} 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'; @@ -71,7 +71,7 @@ export const MultiSelect: ArrayInput = ({name, input, spec, in }, []); const getOptionText: SelectBaseProps['getOptionText'] = React.useCallback( - (option: SelectOption) => spec.description?.[option.value] || option.value, + (option: SelectOptionProps) => spec.description?.[option.value] || option.value, [spec.description], ); diff --git a/src/lib/kit/components/Inputs/Select/Select.tsx b/src/lib/kit/components/Inputs/Select/Select.tsx index 622a02b0..e4567232 100644 --- a/src/lib/kit/components/Inputs/Select/Select.tsx +++ b/src/lib/kit/components/Inputs/Select/Select.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type {SelectProps as SelectBaseProps, SelectOption} from '@gravity-ui/uikit'; +import type {SelectProps as SelectBaseProps, SelectOptionProps} from '@gravity-ui/uikit'; import {Select as SelectBase, Text} from '@gravity-ui/uikit'; import type {StringInput} from '../../../../core'; @@ -64,7 +64,7 @@ export const Select: StringInput = ({name, input, spec, inputProps} }, []); const getOptionText: SelectBaseProps['getOptionText'] = React.useCallback( - (option: SelectOption) => spec.description?.[option.value] || option.value, + (option: SelectOptionProps) => spec.description?.[option.value] || option.value, [spec.description], ); diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx index 070d66ad..53b40d51 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx @@ -119,7 +119,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) => ) : () => ( diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx index ba9028c1..a7d52b60 100644 --- a/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx +++ b/src/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Select, type SelectOption} from '@gravity-ui/uikit'; +import {Select, type SelectOptionProps} from '@gravity-ui/uikit'; import isString from 'lodash/isString'; import type { @@ -20,7 +20,7 @@ const b = block('time-range-select'); interface TimeRangeSelectProps { spec: StringSpec; name: string; - options: SelectOption[]; + options: SelectOptionProps[]; value?: FieldValue; handleChange: (value: string[]) => void; props: IndependentInputProps< diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx index 80ca9381..bc74eb06 100644 --- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx +++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx @@ -50,7 +50,7 @@ export const TableArrayView: ArrayView = ({value = [], spec, name}) => { description && showLayoutDescription ? () => ( diff --git a/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx b/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx index 1a7d22c3..8869e103 100644 --- a/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx +++ b/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx @@ -33,7 +33,7 @@ export const EntityContainer: React.FC = ({ data-droppable={droppable} data-width={width} > - + {children}
diff --git a/src/lib/unstable/kit/components/MonacoContainer/MonacoContainer.tsx b/src/lib/unstable/kit/components/MonacoContainer/MonacoContainer.tsx index e1d3c46d..f8fd77f1 100644 --- a/src/lib/unstable/kit/components/MonacoContainer/MonacoContainer.tsx +++ b/src/lib/unstable/kit/components/MonacoContainer/MonacoContainer.tsx @@ -36,7 +36,7 @@ export const MonacoContainer: React.FC = ({ return (
- + {language} diff --git a/src/lib/unstable/kit/entities/Alert/Alert.tsx b/src/lib/unstable/kit/entities/Alert/Alert.tsx index 9b587625..7d1bfa25 100644 --- a/src/lib/unstable/kit/entities/Alert/Alert.tsx +++ b/src/lib/unstable/kit/entities/Alert/Alert.tsx @@ -48,7 +48,7 @@ export const Alert: NodeEntity = ({props, schema, setExpanded(!expanded)} > diff --git a/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx b/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx index a563f758..a8ab7c24 100644 --- a/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx +++ b/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx @@ -147,7 +147,7 @@ export const ArrayEntity: NodeEntity = ({ } return ( - + {initButton ? ( initButton ) : ( diff --git a/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx b/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx index fc075715..39d45449 100644 --- a/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx +++ b/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx @@ -244,7 +244,7 @@ export const ArrayTable: NodeEntity = ({ diff --git a/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx index 4c33ad9f..0aa4042c 100644 --- a/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx +++ b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx @@ -46,7 +46,7 @@ export const ObjectInline: NodeEntity = ({ className={b('items', {overview: overviewFlag})} direction="row" alignItems="center" - gap={overviewFlag ? 1 : 2} + gap={overviewFlag ? 'spacing-1' : 'spacing-2'} > {(order || Object.keys(schema.properties || {})).map( (property: string, index: number, array: string[]) => ( diff --git a/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx index 3d7e0be5..5dcfdee5 100644 --- a/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx +++ b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx @@ -67,7 +67,7 @@ export const CheckboxGroupInput: NodeEntity {options?.map(({value: optionValue, text}) => ( + {content} {optionMeta} @@ -77,19 +77,19 @@ export const MultiSelectInput: NodeEntity ( + (option: SelectOptionProps) => ( {option.content || option.value} ), [], ); const getOptionText: SelectProps['getOptionText'] = React.useCallback( - (option: SelectOption) => option.data?.text ?? getSelectOptionText(option), + (option: SelectOptionProps) => option.data?.text ?? getSelectOptionText(option), [], ); const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( - (option: SelectOption) => { + (option: SelectOptionProps) => { let height = 28; if (settings?.size) { diff --git a/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx index ae2327cb..335eaf2f 100644 --- a/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx +++ b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx @@ -110,7 +110,7 @@ export const NumberWithScaleInput: NodeEntity
= ({ return ( - + = ({ if (optionMeta) { content = ( - + {content} {optionMeta} @@ -75,19 +75,19 @@ export const SelectInput: NodeEntity = ({ ); const renderOption: SelectProps['renderOption'] = React.useCallback( - (option: SelectOption) => ( + (option: SelectOptionProps) => ( {option.content || option.value} ), [], ); const getOptionText: SelectProps['getOptionText'] = React.useCallback( - (option: SelectOption) => option.data?.text ?? getSelectOptionText(option), + (option: SelectOptionProps) => option.data?.text ?? getSelectOptionText(option), [], ); const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( - (option: SelectOption) => { + (option: SelectOptionProps) => { let height = 28; if (settings?.size) { diff --git a/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx index 84fbd358..9528db5f 100644 --- a/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx +++ b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx @@ -115,7 +115,7 @@ export const StringNumberWithScaleInput: NodeEntity< width="max" className={b({error: getBooleanValidationState(meta)})} direction="row" - gap={2} + gap="spacing-2" >
= ({ const {hidden} = schema.nodeParameters?.flags || {}; return ( -