@gravity-ui/dynamic-forms 5.19.1 → 5.20.0

package/build/cjs/lib/unstable/kit/controls/Label/Label.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons = tslib_1.__importStar(require("@gravity-ui/icons"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const Component = ({ controlProps, input, schema }) => {
+    const { value } = input;
+    const { iconName, iconProps, title } = controlProps, controlRestProps = tslib_1.__rest(controlProps, ["iconName", "iconProps", "title"]);
+    const icon = react_1.default.useMemo(() => iconName && icons[iconName] ? (react_1.default.createElement(uikit_1.Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
+    const content = react_1.default.useMemo(() => {
+        if (title) {
+            if (typeof title === 'string') {
+                return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: title } });
+            }
+            return title;
+        }
+        if (schema.description) {
+            return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [title, schema.description]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit" },
+        react_1.default.createElement(uikit_1.Label, Object.assign({ size: "m", value: value, icon: icon }, controlRestProps), content)));
+};
+exports.Label = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/Label/index.d.ts

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './Label';

package/build/cjs/lib/unstable/kit/controls/Label/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });

package/build/cjs/lib/unstable/kit/controls/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { type SelectProps as SelectBaseProps } from '@gravity-ui/uikit';
+import { type SelectProps as UIKitSelectProps } from '@gravity-ui/uikit';
 import type { JsonSchemaArray } from '../../../core';
-export interface MultiSelectProps extends Omit<SelectBaseProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'multiple' | 'qa'> {
+export interface MultiSelectProps extends Omit<UIKitSelectProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'multiple' | 'errorMessage' | 'validationState' | 'qa'> {
     enumDescriptions?: Record<string, string>;
     optionsMeta?: Record<string, string>;
 }

package/build/cjs/lib/unstable/kit/controls/MultiSelect/MultiSelect.js

@@ -5,11 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const Component = ({ controlProps, input, meta, schema, }) => {
     var _a, _b;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
     const { enumDescriptions, optionsMeta } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["enumDescriptions", "optionsMeta"]);
-    const value = react_1.default.useMemo(() => (Array.isArray(input.value) && input.value.every(isString_1.default) ? input.value : undefined), [input.value]);
+    const value = react_1.default.useMemo(() => (Array.isArray(inputValue) && inputValue.every(isString_1.default) ? inputValue : undefined), [inputValue]);
     const enumValues = schema.items && 'enum' in schema.items ? schema.items.enum : undefined;
     const options = react_1.default.useMemo(() => {
         if (enumValues) {
@@ -30,6 +32,7 @@ const Component = ({ controlProps, input, meta, schema, }) => {
     }, [enumDescriptions, enumValues, optionsMeta]);
     const renderOption = react_1.default.useCallback((option) => (react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
     const getOptionHeight = react_1.default.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
-    return (react_1.default.createElement(uikit_1.Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, disabled: schema.readOnly }, restControlProps, { value: value, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta), placeholder: `${(_b = (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[0]}`, multiple: true, qa: input.name })));
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max" },
+        react_1.default.createElement(uikit_1.Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: `${(_b = (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[0]}`, disabled: schema.readOnly }, restControlProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), multiple: true, qa: name }))));
 };
 exports.MultiSelect = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/NumberBase/NumberBase.css

@@ -0,0 +1,3 @@
+.sr-number-base_error .g-text-input__content {
+  outline: none;
+}

package/build/{esm/lib/unstable/kit/controls/NumberBase/Number.d.ts → cjs/lib/unstable/kit/controls/NumberBase/NumberBase.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type NumberInputProps } from '@gravity-ui/uikit';
 import { type JsonSchemaNumber } from '../../../core';
-export interface NumberBaseProps extends Omit<NumberInputProps, 'value' | 'defaultValue' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'placeholder' | 'qa'> {
+export interface NumberBaseProps extends Omit<NumberInputProps, 'value' | 'defaultValue' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
 }
 export declare const NumberBase: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaNumber<any>, NumberBaseProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/NumberBase/NumberBase.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberBase = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('number-base');
+const Component = ({ controlProps, input, meta, schema, }) => {
+    var _a;
+    const { name, onBlur, onChange, onFocus, value } = input;
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(uikit_1.NumberInput, Object.assign({ allowDecimal: true, hasClear: true, placeholder: `${((_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) || ''}`, disabled: schema.readOnly }, controlProps, { value: value, defaultValue: schema.default, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: name }))));
+};
+exports.NumberBase = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/NumberBase/index.d.ts

@@ -1 +1 @@
-export { NumberBase, type NumberBaseProps } from './Number';
+export { NumberBase, type NumberBaseProps } from './NumberBase';

package/build/cjs/lib/unstable/kit/controls/NumberBase/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberBase = void 0;
-var Number_1 = require("./Number");
-Object.defineProperty(exports, "NumberBase", { enumerable: true, get: function () { return Number_1.NumberBase; } });
+var NumberBase_1 = require("./NumberBase");
+Object.defineProperty(exports, "NumberBase", { enumerable: true, get: function () { return NumberBase_1.NumberBase; } });

package/build/cjs/lib/unstable/kit/controls/ObjectBase/ObjectBase.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { type JsonSchemaObject } from '../../../core';
 export interface ObjectBaseProps {
-    addButtonText?: string;
     disabled?: boolean;
     order?: string[];
 }

package/build/cjs/lib/unstable/kit/controls/ObjectBase/ObjectBase.js

@@ -3,31 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectBase = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../core");
 const components_1 = require("../../components");
-const utils_1 = require("../../utils");
-const Component = ({ controlProps, input, meta, schema, }) => {
-    const addButton = react_1.default.useMemo(() => {
-        const onClick = () => input.onChange(schema.default);
-        return (react_1.default.createElement(uikit_1.Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${input.name}-add-button` },
-            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
-            controlProps.addButtonText || null));
-    }, [
-        controlProps.addButtonText,
-        controlProps.disabled,
-        input.onChange,
-        schema.default,
-        schema.readOnly,
-    ]);
-    return (react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) },
-        react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 2 },
-            react_1.default.createElement(uikit_1.Flex, { direction: "column" },
-                (controlProps.order || Object.keys(schema.properties || {})).map((property) => {
-                    var _a;
-                    return (react_1.default.createElement(core_1.Entity, { name: `${input.name ? input.name + '.' : ''}${property}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[property], key: property }));
-                }),
-                input.value ? null : addButton))));
+const Component = ({ controlProps, input, schema, }) => {
+    const { name } = input;
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "by-child" }, (controlProps.order || Object.keys(schema.properties || {})).map((property) => {
+        var _a;
+        return (react_1.default.createElement(core_1.Entity, { name: `${name ? name + '.' : ''}${property}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[property], key: property }));
+    })));
 };
 exports.ObjectBase = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/ObjectInline/ObjectInline.css

@@ -0,0 +1,8 @@
+.sr-object-inline .sr-object-inline__items > * {
+  margin-bottom: 0;
+}
+.sr-object-inline__delimiter {
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}

package/build/cjs/lib/unstable/kit/controls/ObjectInline/ObjectInline.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type JsonSchemaObject } from '../../../core';
+export interface ObjectInlineProps {
+    delimiter?: string | Record<string, string>;
+    disabled?: boolean;
+    order?: string[];
+}
+export declare const ObjectInline: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaObject<any>, ObjectInlineProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/ObjectInline/ObjectInline.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectInline = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('object-inline');
+const Component = ({ controlProps, input, schema }) => {
+    const { delimiter, order } = controlProps;
+    const { name } = input;
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b() },
+        react_1.default.createElement(uikit_1.Flex, { className: b('items'), direction: "row", alignItems: "flex-start", gap: 2 }, (order || Object.keys(schema.properties || {})).map((property, index, array) => {
+            var _a;
+            return (react_1.default.createElement(react_1.default.Fragment, { key: property },
+                react_1.default.createElement(core_1.Entity, { name: `${name ? name + '.' : ''}${property}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[property] }),
+                (0, isString_1.default)(delimiter) && index + 1 !== array.length ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter)) : null,
+                (0, isObject_1.default)(delimiter) && delimiter[property] ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter[property])) : null));
+        }))));
+};
+exports.ObjectInline = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/ObjectInline/index.d.ts

@@ -0,0 +1 @@
+export { ObjectInline, type ObjectInlineProps } from './ObjectInline';

package/build/cjs/lib/unstable/kit/controls/ObjectInline/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectInline = void 0;
+var ObjectInline_1 = require("./ObjectInline");
+Object.defineProperty(exports, "ObjectInline", { enumerable: true, get: function () { return ObjectInline_1.ObjectInline; } });

package/build/cjs/lib/unstable/kit/controls/OneOfNested/OneOfNested.css

@@ -0,0 +1,14 @@
+.sr-one-of-nested__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-one-of-nested__content_with-indent:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: calc(100% + var(--g-spacing-base) * 2);
+  background-color: var(--g-color-line-generic);
+  position: absolute;
+  left: calc(var(--g-spacing-base) * 3 + 1.5px);
+  bottom: 0;
+}

package/build/cjs/lib/unstable/kit/controls/OneOfNested/OneOfNested.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type JsonSchema, type JsonSchemaObject } from '../../../core';
+export interface OneOfNestedProps {
+    toggler: JsonSchema;
+    booleanToKey?: {
+        true: string;
+        false: string;
+    };
+    withIndent?: boolean;
+    togglerArrayRemoveButton?: boolean;
+}
+export declare const OneOfNested: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaObject<any>, OneOfNestedProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/OneOfNested/OneOfNested.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfNested = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('one-of-nested');
+const Component = ({ controlProps, input, meta, schema, Wrapper, wrapperProps, }) => {
+    var _a;
+    const { name, value } = input;
+    const { booleanToKey, togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = controlProps;
+    const { config } = (0, core_1.useEntitiesState)(name);
+    const [togglerValue, setTogglerValue] = react_1.default.useState(Object.keys(value || schema.properties || {})[0] || '');
+    const toggler = react_1.default.useMemo(() => {
+        var _a, _b;
+        let result = null;
+        const formKit = (0, core_1.getRenderKit)({ config, schema: togglerSchema })[core_1.SchemaRendererMode.Form];
+        const togglerInput = Object.assign(Object.assign({}, input), { name: togglerArrayRemoveButton ? name : `${name}._____toggler`, value: (_b = (((_a = togglerSchema.entityParameters) === null || _a === void 0 ? void 0 : _a.type) === core_1.EntityType.Boolean &&
+                booleanToKey &&
+                booleanToKey.true === togglerValue)) !== null && _b !== void 0 ? _b : togglerValue, onChange: (value) => {
+                const nextValue = `${value}`;
+                setTogglerValue((booleanToKey === null || booleanToKey === void 0 ? void 0 : booleanToKey[nextValue]) || nextValue);
+            } });
+        const togglerMeta = Object.assign(Object.assign({}, meta), { error: undefined });
+        if (formKit.Component) {
+            if (formKit.independent) {
+                result = (react_1.default.createElement(formKit.Component, { input: togglerInput, meta: togglerMeta, schema: togglerSchema, controlProps: formKit.props, Wrapper: formKit.Wrapper, wrapperProps: formKit.wrapperProps }));
+            }
+            else {
+                result = (react_1.default.createElement(formKit.Component, { input: togglerInput, meta: togglerMeta, schema: togglerSchema, controlProps: formKit.props }));
+                if (formKit.Wrapper) {
+                    result = (react_1.default.createElement(formKit.Wrapper, { input: togglerInput, meta: togglerMeta, schema: togglerSchema, wrapperProps: formKit.wrapperProps }, result));
+                }
+            }
+        }
+        return result;
+    }, [
+        booleanToKey,
+        config,
+        name,
+        input,
+        meta,
+        togglerArrayRemoveButton,
+        togglerSchema,
+        togglerValue,
+    ]);
+    const wrapperInput = react_1.default.useMemo(() => {
+        if (!togglerArrayRemoveButton) {
+            return input;
+        }
+        return Object.assign(Object.assign({}, input), { name: `${name}._____wrapper` });
+    }, [name, input, togglerArrayRemoveButton]);
+    let content = (react_1.default.createElement(components_1.ControlContainer, { stretch: "by-child" },
+        toggler,
+        react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) },
+            react_1.default.createElement(core_1.Entity, { name: `${name}.${togglerValue}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[togglerValue] }))));
+    if (Wrapper) {
+        content = (react_1.default.createElement(Wrapper, { input: wrapperInput, meta: meta, schema: schema, wrapperProps: wrapperProps || {} }, content));
+    }
+    return content;
+};
+exports.OneOfNested = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/OneOfNested/index.d.ts

@@ -0,0 +1 @@
+export { OneOfNested, type OneOfNestedProps } from './OneOfNested';

package/build/cjs/lib/unstable/kit/controls/OneOfNested/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfNested = void 0;
+var OneOfNested_1 = require("./OneOfNested");
+Object.defineProperty(exports, "OneOfNested", { enumerable: true, get: function () { return OneOfNested_1.OneOfNested; } });

package/build/cjs/lib/unstable/kit/controls/Password/Password.css

@@ -0,0 +1,3 @@
+.sr-password_error .g-text-input__content {
+  outline: none;
+}

package/build/cjs/lib/unstable/kit/controls/Password/Password.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type PasswordInputProps } from '@gravity-ui/uikit';
 import type { JsonSchemaString } from '../../../core';
-export interface PasswordProps extends Omit<PasswordInputProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'placeholder' | 'qa'> {
+export interface PasswordProps extends Omit<PasswordInputProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
 }
 export declare const Password: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, PasswordProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/Password/Password.js

@@ -4,9 +4,13 @@ exports.Password = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
 const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('password');
 const Component = ({ controlProps, input, meta, schema, }) => {
-    var _a, _b;
-    return (react_1.default.createElement(uikit_1.PasswordInput, Object.assign({ autoComplete: "new-password", hasClear: true, disabled: schema.readOnly }, controlProps, { value: (_a = input.value) !== null && _a !== void 0 ? _a : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta), placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], qa: input.name })));
+    var _a;
+    const { name, onBlur, onChange, onFocus, value } = input;
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(uikit_1.PasswordInput, Object.assign({ autoComplete: "new-password", placeholder: (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0], disabled: schema.readOnly, hasClear: true }, controlProps, { value: value !== null && value !== void 0 ? value : '', onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: name }))));
 };
 exports.Password = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/RadioGroup/RadioGroup.css

@@ -1,3 +1,13 @@
-.sr-radio-group {
-  padding-top: 7.5px;
+.sr-radio-group_direction_horizontal {
+  min-height: 28px;
+  padding-top: 1px;
+}
+.sr-radio-group_direction_vertical {
+  padding-top: 7px;
+}
+.sr-radio-group_error .g-radio-group .g-radio_checked .g-radio__indicator:hover::before {
+  border: 1px solid var(--g-color-text-danger);
+}
+.sr-radio-group_error .g-radio-group .g-radio_checked .g-radio__indicator::before {
+  border: 1px solid var(--g-color-text-danger);
 }

package/build/cjs/lib/unstable/kit/controls/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { type RadioGroupProps as RadioGroupBaseProps } from '@gravity-ui/uikit';
+import { type RadioGroupProps as UIKitRadioGroupProps } from '@gravity-ui/uikit';
 import type { JsonSchemaString } from '../../../core';
-export interface RadioGroupProps extends Omit<RadioGroupBaseProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
+export interface RadioGroupProps extends Omit<UIKitRadioGroupProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
     enumDescriptions?: Record<string, string>;
     optionsDisabled?: Record<string, boolean>;
 }

package/build/cjs/lib/unstable/kit/controls/RadioGroup/RadioGroup.js

@@ -8,7 +8,8 @@ const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('radio-group');
 const Component = ({ controlProps, input, meta, schema, }) => {
-    const { enumDescriptions, optionsDisabled } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["enumDescriptions", "optionsDisabled"]);
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const { enumDescriptions, optionsDisabled, direction = 'horizontal' } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["enumDescriptions", "optionsDisabled", "direction"]);
     const options = react_1.default.useMemo(() => {
         var _a;
         return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
@@ -17,8 +18,7 @@ const Component = ({ controlProps, input, meta, schema, }) => {
             disabled: optionsDisabled === null || optionsDisabled === void 0 ? void 0 : optionsDisabled[value],
         }));
     }, [enumDescriptions, optionsDisabled, schema.enum]);
-    return (react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) },
-        react_1.default.createElement(uikit_1.Flex, { className: b(), alignItems: "center" },
-            react_1.default.createElement(uikit_1.RadioGroup, Object.assign({ options: options, disabled: schema.readOnly }, restControlProps, { value: input.value, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, qa: input.name })))));
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit", className: b({ error: (0, utils_1.getBooleanValidationState)(meta), direction }), justifyContent: "center" },
+        react_1.default.createElement(uikit_1.RadioGroup, Object.assign({ options: options, disabled: schema.readOnly }, restControlProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
 };
 exports.RadioGroup = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/RangeSlider/RangeSlider.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { type SliderProps as SliderBaseProps } from '@gravity-ui/uikit';
+import { type SliderProps as UIKitSliderProps } from '@gravity-ui/uikit';
 import type { JsonSchemaObject } from '../../../core';
-export interface RangeSliderProps extends Omit<SliderBaseProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
+export interface RangeSliderProps extends Omit<UIKitSliderProps, 'defaultValue' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
     propertyKeys?: [string, string];
 }
 export declare const RangeSlider: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaObject<any>, RangeSliderProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/RangeSlider/RangeSlider.js

@@ -4,10 +4,11 @@ exports.RangeSlider = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
 const utils_1 = require("../../utils");
-const b = (0, utils_1.block)('range-slider');
 const Component = ({ controlProps, input, meta, schema, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
     const { propertyKeys } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["propertyKeys"]);
     const [fromKey, toKey] = propertyKeys || ['from', 'to'];
     const min = ((_a = schema.properties) === null || _a === void 0 ? void 0 : _a[fromKey]) && 'minimum' in schema.properties[fromKey]
@@ -16,18 +17,19 @@ const Component = ({ controlProps, input, meta, schema, }) => {
     const max = ((_d = schema.properties) === null || _d === void 0 ? void 0 : _d[toKey]) && 'maximum' in schema.properties[toKey]
         ? (_f = (_e = schema.properties) === null || _e === void 0 ? void 0 : _e[toKey]) === null || _f === void 0 ? void 0 : _f.maximum
         : undefined;
-    const value = isNaN(Number((_g = input.value) === null || _g === void 0 ? void 0 : _g[fromKey])) || isNaN(Number((_h = input.value) === null || _h === void 0 ? void 0 : _h[toKey]))
+    const value = isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey])) || isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey]))
         ? undefined
-        : [Number((_j = input.value) === null || _j === void 0 ? void 0 : _j[fromKey]), Number((_k = input.value) === null || _k === void 0 ? void 0 : _k[toKey])];
-    const defaultValue = isNaN(Number((_l = schema.default) === null || _l === void 0 ? void 0 : _l[fromKey])) || isNaN(Number((_m = schema.default) === null || _m === void 0 ? void 0 : _m[toKey]))
+        : [Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey]), Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey])];
+    const defaultValue = isNaN(Number((_g = schema.default) === null || _g === void 0 ? void 0 : _g[fromKey])) || isNaN(Number((_h = schema.default) === null || _h === void 0 ? void 0 : _h[toKey]))
         ? undefined
-        : [Number((_o = schema.default) === null || _o === void 0 ? void 0 : _o[fromKey]), Number((_p = schema.default) === null || _p === void 0 ? void 0 : _p[toKey])];
+        : [Number((_j = schema.default) === null || _j === void 0 ? void 0 : _j[fromKey]), Number((_k = schema.default) === null || _k === void 0 ? void 0 : _k[toKey])];
     const onUpdate = react_1.default.useCallback((next) => {
         if (!Array.isArray(next)) {
             return;
         }
-        input.onChange({ [fromKey]: next[0], [toKey]: next[1] });
-    }, [fromKey, toKey, input.onChange]);
-    return (react_1.default.createElement(uikit_1.Slider, Object.assign({ className: b(), min: min, max: max, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, restControlProps, { defaultValue: defaultValue, value: value, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: onUpdate, errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta), qa: input.name })));
+        onChange({ [fromKey]: next[0], [toKey]: next[1] });
+    }, [fromKey, toKey, onChange]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max" },
+        react_1.default.createElement(uikit_1.Slider, Object.assign({ min: min, max: max, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, restControlProps, { defaultValue: defaultValue, value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: name }))));
 };
 exports.RangeSlider = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/SegmentedRadioGroup/SegmentedRadioGroup.css

@@ -0,0 +1,6 @@
+.sr-segmented-radio-group_error .g-segmented-radio-group .g-segmented-radio-group__option_checked:hover::after {
+  border: 1px solid var(--g-color-text-danger);
+}
+.sr-segmented-radio-group_error .g-segmented-radio-group .g-segmented-radio-group__option_checked::after {
+  border: 1px solid var(--g-color-text-danger);
+}

package/build/cjs/lib/unstable/kit/controls/SegmentedRadioGroup/SegmentedRadioGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type SegmentedRadioGroupProps as UIKitSegmentedRadioGroupProps } from '@gravity-ui/uikit';
+import type { JsonSchemaString } from '../../../core';
+export interface SegmentedRadioGroupProps extends Omit<UIKitSegmentedRadioGroupProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
+    enumDescriptions?: Record<string, string>;
+    optionsDisabled?: Record<string, boolean>;
+}
+export declare const SegmentedRadioGroup: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, SegmentedRadioGroupProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/SegmentedRadioGroup/SegmentedRadioGroup.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedRadioGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('segmented-radio-group');
+const Component = ({ controlProps, input, meta, schema, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const { enumDescriptions, optionsDisabled } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["enumDescriptions", "optionsDisabled"]);
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
+            value,
+            content: (enumDescriptions === null || enumDescriptions === void 0 ? void 0 : enumDescriptions[value]) || value,
+            disabled: optionsDisabled === null || optionsDisabled === void 0 ? void 0 : optionsDisabled[value],
+        }));
+    }, [enumDescriptions, optionsDisabled, schema.enum]);
+    const onUpdate = react_1.default.useCallback((value) => {
+        onFocus();
+        onChange(value);
+        onBlur();
+    }, [onBlur, onChange, onFocus]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ width: "max", disabled: schema.readOnly, options: options }, restControlProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
+};
+exports.SegmentedRadioGroup = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/SegmentedRadioGroup/index.d.ts

@@ -0,0 +1 @@
+export { SegmentedRadioGroup, type SegmentedRadioGroupProps } from './SegmentedRadioGroup';

package/build/cjs/lib/unstable/kit/controls/SegmentedRadioGroup/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedRadioGroup = void 0;
+var SegmentedRadioGroup_1 = require("./SegmentedRadioGroup");
+Object.defineProperty(exports, "SegmentedRadioGroup", { enumerable: true, get: function () { return SegmentedRadioGroup_1.SegmentedRadioGroup; } });

package/build/cjs/lib/unstable/kit/controls/Select/Select.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { type SelectProps as SelectBaseProps } from '@gravity-ui/uikit';
+import { type SelectProps as UIKitSelectProps } from '@gravity-ui/uikit';
 import type { JsonSchemaString } from '../../../core';
-export interface SelectProps extends Omit<SelectBaseProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'onOpenChange' | 'multiple' | 'qa'> {
+export interface SelectProps extends Omit<UIKitSelectProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'multiple' | 'errorMessage' | 'validationState' | 'qa'> {
     enumDescriptions?: Record<string, string>;
     optionsMeta?: Record<string, string>;
-    options?: SelectBaseProps['options'];
+    options?: UIKitSelectProps['options'];
 }
 export declare const Select: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, SelectProps, {}>>;

package/build/cjs/lib/unstable/kit/controls/Select/Select.js

@@ -5,12 +5,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const Component = ({ controlProps, input, meta, schema }) => {
     var _a, _b;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
     const { enumDescriptions, optionsMeta } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["enumDescriptions", "optionsMeta"]);
-    const value = react_1.default.useMemo(() => ((0, isString_1.default)(input.value) ? [input.value] : undefined), [input.value]);
-    const onUpdate = react_1.default.useCallback((v) => input.onChange(v[0]), [input.onChange]);
+    const value = react_1.default.useMemo(() => ((0, isString_1.default)(inputValue) ? [inputValue] : undefined), [inputValue]);
+    const onUpdate = react_1.default.useCallback((v) => onChange(v[0]), [onChange]);
     const options = react_1.default.useMemo(() => {
         var _a;
         return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => {
@@ -27,6 +29,7 @@ const Component = ({ controlProps, input, meta, schema }) => {
     }, [enumDescriptions, optionsMeta, schema.enum]);
     const renderOption = react_1.default.useCallback((option) => (react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
     const getOptionHeight = react_1.default.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
-    return (react_1.default.createElement(uikit_1.Select, Object.assign({ width: "max", options: options, filterable: (((_a = schema.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, disabled: schema.readOnly }, restControlProps, { value: value, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: onUpdate, errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta), placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], qa: input.name })));
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max" },
+        react_1.default.createElement(uikit_1.Select, Object.assign({ width: "max", options: options, filterable: (((_a = schema.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: schema.readOnly }, restControlProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), qa: name }))));
 };
 exports.Select = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/controls/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type SliderProps as SliderBaseProps } from '@gravity-ui/uikit';
+import { type SliderProps as UIKitSliderProps } from '@gravity-ui/uikit';
 import type { JsonSchemaNumber } from '../../../core';
-export interface SliderProps extends Omit<SliderBaseProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
+export interface SliderProps extends Omit<UIKitSliderProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
 }
 export declare const Slider: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaNumber<any>, SliderProps, {}>>;