@gravity-ui/dynamic-forms 5.19.0 → 5.20.0

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

@@ -8,9 +8,13 @@ const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('checkbox');
 const Component = ({ controlProps, input, meta, schema, }) => {
-    var _a;
-    return (react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) },
-        react_1.default.createElement("div", { className: b() },
-            react_1.default.createElement(uikit_1.Checkbox, Object.assign({ disabled: schema.readOnly }, controlProps, { className: b(), checked: (_a = input.value) !== null && _a !== void 0 ? _a : false, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, qa: input.name })))));
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const onUpdate = react_1.default.useCallback((value) => {
+        onFocus();
+        onChange(value);
+        onBlur();
+    }, [onBlur, onChange, onFocus]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(uikit_1.Checkbox, Object.assign({ disabled: schema.readOnly }, controlProps, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
 };
 exports.Checkbox = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

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

@@ -1,3 +1,9 @@
-.sr-checkbox-group {
-  padding-top: 7.5px;
+.sr-checkbox-group__checkbox {
+  min-height: 28px;
+}
+.sr-checkbox-group__checkbox_error .g-control-label .g-checkbox__indicator:hover::before {
+  border: 1px solid var(--g-color-text-danger);
+}
+.sr-checkbox-group__checkbox_error .g-control-label .g-checkbox__indicator::before {
+  border: 1px solid var(--g-color-text-danger);
 }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { JsonSchemaArray } from '../../../core';
+export interface CheckboxGroupProps {
+    enumDescriptions?: Record<string, string>;
+    optionsDisabled?: Record<string, boolean>;
+    direction?: 'row' | 'column';
+    disabled?: boolean;
+}
+export declare const CheckboxGroup: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaArray<any>, CheckboxGroupProps, {}>>;

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

@@ -8,8 +8,9 @@ const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('checkbox-group');
 const Component = ({ controlProps, input, meta, schema, }) => {
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
     const { direction, disabled, enumDescriptions, optionsDisabled } = controlProps;
-    const value = react_1.default.useMemo(() => (Array.isArray(input.value) ? input.value : []), [input.value]);
+    const value = react_1.default.useMemo(() => (Array.isArray(inputValue) ? inputValue : []), [inputValue]);
     const options = react_1.default.useMemo(() => {
         var _a, _b;
         if (schema.items && 'enum' in schema.items) {
@@ -24,14 +25,18 @@ const Component = ({ controlProps, input, meta, schema, }) => {
         return;
     }, [enumDescriptions, schema]);
     const onUpdate = react_1.default.useCallback((optionValue, selected) => {
+        onFocus();
         if (selected) {
-            input.onChange([...value, optionValue]);
+            onChange([...value, optionValue]);
         }
         else {
-            input.onChange(value.filter((el) => el !== optionValue));
+            onChange(value.filter((el) => el !== optionValue));
         }
-    }, [input.onChange, value]);
-    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(), direction: direction, gap: 2 }, options === null || options === void 0 ? void 0 : options.map(({ value: optionValue, text }) => (react_1.default.createElement(uikit_1.Checkbox, { checked: value.includes(optionValue), onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: (checked) => onUpdate(optionValue, checked), content: text, disabled: disabled || (optionsDisabled === null || optionsDisabled === void 0 ? void 0 : optionsDisabled[optionValue]) || schema.readOnly, qa: `${input.name}-${optionValue}`, key: optionValue }))))));
+        onBlur();
+    }, [onBlur, onChange, onFocus, value]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit", direction: direction, gap: direction === 'row' ? 2 : undefined }, options === null || options === void 0 ? void 0 : options.map(({ value: optionValue, text }) => (react_1.default.createElement(uikit_1.Flex, { className: b('checkbox', {
+            error: value.includes(optionValue) && (0, utils_1.getBooleanValidationState)(meta),
+        }), alignItems: "center", key: optionValue },
+        react_1.default.createElement(uikit_1.Checkbox, { checked: value.includes(optionValue), onFocus: onFocus, onBlur: onBlur, onUpdate: (checked) => onUpdate(optionValue, checked), content: text, disabled: disabled || (optionsDisabled === null || optionsDisabled === void 0 ? void 0 : optionsDisabled[optionValue]) || schema.readOnly, qa: `${name}-${optionValue}` }))))));
 };
 exports.CheckboxGroup = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup';

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

@@ -0,0 +1,6 @@
+.sr-color-picker .g-color-picker__picker-wrapper {
+  width: 100%;
+}
+.sr-color-picker_error .g-color-picker__picker-wrapper .g-text-input__content {
+  border: 1px solid var(--g-color-text-danger);
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type unstable_ColorPickerProps as UIKitColorPickerProps } from '@gravity-ui/uikit/unstable';
+import type { JsonSchemaString } from '../../../core';
+export interface ColorPickerProps extends Omit<UIKitColorPickerProps, 'value' | 'onUpdate'> {
+}
+export declare const ColorPicker: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, ColorPickerProps, {}>>;

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

@@ -6,19 +6,20 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const unstable_1 = require("@gravity-ui/uikit/unstable");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('color-picker');
 const Component = ({ controlProps, input, meta, schema, }) => {
-    var _a;
+    const { name, onBlur, onChange, onFocus, value } = input;
     const { onOpenChange: onOpenChangeProps } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["onOpenChange"]);
     const onOpenChange = react_1.default.useCallback((open) => {
         onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(open);
         if (open) {
-            input.onFocus();
+            onFocus();
         }
         else {
-            input.onBlur();
+            onBlur();
         }
-    }, [input.onBlur, input.onFocus, onOpenChangeProps]);
-    return (react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) },
-        react_1.default.createElement(unstable_1.unstable_ColorPicker, Object.assign({ disabled: schema.readOnly }, restControlProps, { value: (_a = input.value) !== null && _a !== void 0 ? _a : '', onUpdate: input.onChange, onOpenChange: onOpenChange }))));
+    }, [onBlur, onFocus, onOpenChangeProps]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(unstable_1.unstable_ColorPicker, Object.assign({ disabled: schema.readOnly }, restControlProps, { value: value !== null && value !== void 0 ? value : '', onUpdate: onChange, onOpenChange: onOpenChange, "data-qa": name }))));
 };
 exports.ColorPicker = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { ColorPicker, type ColorPickerProps } from './ColorPicker';

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

@@ -1,3 +1,3 @@
-.sr-date-input {
-  width: 100%;
+.sr-date-input_error .g-date-date-picker .g-text-input__content {
+  border: 1px solid var(--g-color-text-danger);
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type DatePickerProps } from '@gravity-ui/date-components';
+import type { JsonSchemaAny } from '../../../core';
+export declare const DEFAULT_DATE_FORMAT = "DD.MM.YYYY HH:mm";
+export interface DateInputProps extends Omit<DatePickerProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState'> {
+    outputFormat?: string;
+}
+export declare const DateInput: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaAny<any>, DateInputProps, {}>>;

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

@@ -7,49 +7,50 @@ const date_components_1 = require("@gravity-ui/date-components");
 const date_utils_1 = require("@gravity-ui/date-utils");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
-exports.DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm';
 const b = (0, utils_1.block)('date-input');
+exports.DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm';
 const Component = ({ controlProps, input, meta, schema }) => {
     var _a;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
     const { outputFormat, timeZone: timeZoneProp } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["outputFormat", "timeZone"]);
     const timeZone = timeZoneProp && (0, date_utils_1.isValidTimeZone)(timeZoneProp) ? timeZoneProp : undefined;
     const onUpdate = react_1.default.useCallback((date) => {
         if (!date) {
-            input.onChange(undefined);
+            onChange(undefined);
             return;
         }
         if (outputFormat === 'date_time') {
-            input.onChange(date);
+            onChange(date);
             return;
         }
         if (outputFormat === 'date') {
-            input.onChange(date.toDate());
+            onChange(date.toDate());
             return;
         }
         if (outputFormat === 'timestamp') {
-            input.onChange({
+            onChange({
                 seconds: Math.floor(date.toDate().getTime() / 1000),
                 nanos: 0,
             });
             return;
         }
         if (outputFormat === 'string' || !outputFormat) {
-            input.onChange(date.toISOString());
+            onChange(date.toISOString());
             return;
         }
-        input.onChange(date.format(outputFormat));
-    }, [outputFormat, input.onChange]);
+        onChange(date.format(outputFormat));
+    }, [outputFormat, onChange]);
     const value = react_1.default.useMemo(() => {
-        if (!input.value) {
+        if (!inputValue) {
             return null;
         }
-        let raw = input.value;
+        let raw = inputValue;
         if (typeof raw === 'object' && raw !== null && 'seconds' in raw && raw.seconds) {
             raw = raw.seconds * 1000;
         }
         return (0, date_utils_1.dateTimeParse)(raw, { format: outputFormat, timeZone }) || null;
-    }, [input.value, outputFormat, timeZone]);
-    return (react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) },
-        react_1.default.createElement(date_components_1.DatePicker, Object.assign({ className: b(), format: exports.DEFAULT_DATE_FORMAT, popupPlacement: "bottom-start", disabled: schema.readOnly, hasClear: true }, restControlProps, { value: value, onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: onUpdate, placeholder: `${(_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]}`, timeZone: timeZone, "data-qa": input.name }))));
+    }, [inputValue, outputFormat, timeZone]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
+        react_1.default.createElement(date_components_1.DatePicker, Object.assign({ format: exports.DEFAULT_DATE_FORMAT, popupPlacement: "bottom-start", placeholder: `${(_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]}`, disabled: schema.readOnly, hasClear: true }, restControlProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, timeZone: timeZone, errorMessage: undefined, validationState: undefined, "data-qa": name }))));
 };
 exports.DateInput = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { DateInput, type DateInputProps } from './DateInput';

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type JsonSchemaObject } from '../../../core';
+export interface DotValueProps {
+}
+export declare const DotValue: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaObject<any>, DotValueProps, {}>>;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotValue = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const get_1 = tslib_1.__importDefault(require("lodash/get"));
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const core_1 = require("../../../core");
+const components_1 = require("../../components");
+const Component = ({ input, schema }) => {
+    var _a;
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const childKey = 'value';
+    react_1.default.useLayoutEffect(() => {
+        if (value) {
+            const childValue = (0, get_1.default)(value, childKey);
+            if (childValue === null ||
+                childValue === undefined ||
+                childValue === '' ||
+                ((0, isString_1.default)(childValue) && childValue.endsWith('_UNSPECIFIED'))) {
+                onFocus();
+                onChange(undefined);
+                onBlur();
+            }
+        }
+    }, [value]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "by-child" },
+        react_1.default.createElement(core_1.Entity, { name: `${name ? name + '.' : ''}${childKey}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[childKey] })));
+};
+exports.DotValue = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { DotValue, type DotValueProps } from './DotValue';

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

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

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

@@ -0,0 +1,14 @@
+.sr-few-of-nested__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-few-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/FewOfNested/FewOfNested.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type JsonSchema, type JsonSchemaObject } from '../../../core';
+export interface FewOfNestedProps {
+    toggler: JsonSchema;
+    withIndent?: boolean;
+    togglerArrayRemoveButton?: boolean;
+}
+export declare const FewOfNested: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaObject<any>, FewOfNestedProps, {}>>;

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FewOfNested = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+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)('one-of-nested');
+const Component = ({ controlProps, input, meta, schema, Wrapper, wrapperProps, }) => {
+    const { name, value } = input;
+    const { togglerArrayRemoveButton = false, toggler: togglerSchema = {}, withIndent = false, } = controlProps;
+    const { config } = (0, core_1.useEntitiesState)(name);
+    const [togglerValues, setTogglerValues] = react_1.default.useState(() => {
+        if (value && Object.keys(value).length) {
+            return Object.keys(value);
+        }
+        if (schema.properties && Object.keys(schema.properties).length) {
+            return [Object.keys(schema.properties)[0]];
+        }
+        return [];
+    });
+    const toggler = react_1.default.useMemo(() => {
+        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: togglerValues, onChange: (value) => {
+                if (Array.isArray(value)) {
+                    setTogglerValues(value.filter(isString_1.default));
+                }
+            } });
+        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;
+    }, [config, name, input, meta, togglerArrayRemoveButton, togglerSchema, togglerValues]);
+    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,
+        togglerValues.length ? (react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, togglerValues.map((togglerValue) => {
+            var _a;
+            return (react_1.default.createElement(core_1.Entity, { key: togglerValue, name: `${name}.${togglerValue}`, schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[togglerValue] }));
+        }))) : null));
+    if (Wrapper) {
+        content = (react_1.default.createElement(Wrapper, { input: wrapperInput, meta: meta, schema: schema, wrapperProps: wrapperProps || {} }, content));
+    }
+    return content;
+};
+exports.FewOfNested = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { FewOfNested, type FewOfNestedProps } from './FewOfNested';

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type FileDropZoneProps } from '@gravity-ui/uikit/unstable';
+import type { JsonSchemaString } from '../../../core';
+export interface FileInputProps extends Omit<FileDropZoneProps, 'multiple' | 'onUpdate' | 'errorMessage' | 'validationState'> {
+    readAsMethod?: 'readAsBinaryString' | 'readAsDataURL' | 'readAsText';
+}
+export declare const FileInput: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, FileInputProps, {}>>;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = 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 unstable_1 = require("@gravity-ui/uikit/unstable");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const Component = ({ controlProps, input, meta, schema, }) => {
+    const { onBlur, onChange, onFocus } = input;
+    const { readAsMethod = 'readAsBinaryString' } = controlProps, restControlProps = tslib_1.__rest(controlProps, ["readAsMethod"]);
+    const counterRef = react_1.default.useRef(0);
+    const [file, setFile] = react_1.default.useState(null);
+    const actions = react_1.default.useMemo(() => [
+        {
+            id: 'remove',
+            title: '',
+            icon: react_1.default.createElement(icons_1.Xmark, { width: 14, height: 14 }),
+            onClick: () => {
+                onChange(undefined);
+                setFile(null);
+            },
+            tooltipExtraProps: { disabled: true },
+        },
+    ], [onChange]);
+    const onUpdate = react_1.default.useCallback((files) => {
+        if (files.length) {
+            const reader = new FileReader();
+            if (typeof reader[readAsMethod] !== 'function') {
+                throw new Error(`Unknown parameter: ${readAsMethod}`);
+            }
+            const counter = ++counterRef.current;
+            reader.addEventListener('load', () => {
+                if (counter === counterRef.current) {
+                    onFocus();
+                    onChange(reader.result);
+                    onBlur();
+                    setFile(files[0]);
+                }
+            });
+            reader[readAsMethod](files[0]);
+        }
+    }, [onBlur, onChange, onFocus, readAsMethod]);
+    if (file) {
+        return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit" },
+            react_1.default.createElement(uikit_1.FilePreview, { file: file, actions: actions })));
+    }
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "max" },
+        react_1.default.createElement(unstable_1.unstable_FileDropZone, Object.assign({ disabled: schema.readOnly, accept: [] }, restControlProps, { onUpdate: onUpdate, errorMessage: undefined, validationState: (0, utils_1.getValidationState)(meta), multiple: false }))));
+};
+exports.FileInput = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { FileInput, type FileInputProps } from './FileInput';

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import * as icons from '@gravity-ui/icons';
+import { type IconProps, type LabelProps as UIKitLabelProps } from '@gravity-ui/uikit';
+import type { JsonSchemaString } from '../../../core';
+export interface LabelProps extends UIKitLabelProps {
+    iconName?: keyof typeof icons;
+    iconProps?: Partial<IconProps>;
+}
+export declare const Label: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaString<any>, LabelProps, {}>>;

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

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

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/MultiSelect/index.d.ts

@@ -0,0 +1 @@
+export { MultiSelect, type MultiSelectProps } from './MultiSelect';

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

@@ -0,0 +1 @@
+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

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