@gravity-ui/dynamic-forms 5.19.0 → 5.20.0

package/build/cjs/lib/unstable/kit/components/WrapperContainer/WrapperContainer.css

@@ -0,0 +1,8 @@
+.sr-wrapper-container {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+.sr-wrapper-container:has([data-stretch=max]) {
+  width: 100%;
+  flex: 1 0 0;
+}

package/build/cjs/lib/unstable/kit/components/WrapperContainer/WrapperContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type FlexProps } from '@gravity-ui/uikit';
+export interface WrapperContainerProps extends FlexProps {
+    children: React.ReactNode;
+}
+export declare const WrapperContainer: React.NamedExoticComponent<WrapperContainerProps>;

package/build/cjs/lib/unstable/kit/components/WrapperContainer/WrapperContainer.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapperContainer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('wrapper-container');
+const Component = (_a) => {
+    var { className, children } = _a, restProps = tslib_1.__rest(_a, ["className", "children"]);
+    return (react_1.default.createElement(uikit_1.Flex, Object.assign({ className: b(null, className), direction: "column" }, restProps), children));
+};
+exports.WrapperContainer = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/components/WrapperContainer/index.d.ts

@@ -0,0 +1 @@
+export { WrapperContainer, type WrapperContainerProps } from './WrapperContainer';

package/build/cjs/lib/unstable/kit/components/WrapperContainer/index.js

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

package/build/cjs/lib/unstable/kit/components/index.d.ts

@@ -0,0 +1,5 @@
+export { ArrayRemoveButton, type ArrayRemoveButtonProps } from './ArrayRemoveButton';
+export { ControlContainer, type ControlContainerProps } from './ControlContainer';
+export { ControlError, type ControlErrorProps } from './ControlError';
+export { HTMLContent, type HTMLContentProps } from './HTMLContent';
+export { WrapperContainer, type WrapperContainerProps } from './WrapperContainer';

package/build/cjs/lib/unstable/kit/components/index.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTMLContent = exports.ControlError = exports.ArrayRemoveButton = void 0;
+exports.WrapperContainer = exports.HTMLContent = exports.ControlError = exports.ControlContainer = exports.ArrayRemoveButton = void 0;
 var ArrayRemoveButton_1 = require("./ArrayRemoveButton");
 Object.defineProperty(exports, "ArrayRemoveButton", { enumerable: true, get: function () { return ArrayRemoveButton_1.ArrayRemoveButton; } });
+var ControlContainer_1 = require("./ControlContainer");
+Object.defineProperty(exports, "ControlContainer", { enumerable: true, get: function () { return ControlContainer_1.ControlContainer; } });
 var ControlError_1 = require("./ControlError");
 Object.defineProperty(exports, "ControlError", { enumerable: true, get: function () { return ControlError_1.ControlError; } });
 var HTMLContent_1 = require("./HTMLContent");
 Object.defineProperty(exports, "HTMLContent", { enumerable: true, get: function () { return HTMLContent_1.HTMLContent; } });
+var WrapperContainer_1 = require("./WrapperContainer");
+Object.defineProperty(exports, "WrapperContainer", { enumerable: true, get: function () { return WrapperContainer_1.WrapperContainer; } });

package/build/cjs/lib/unstable/kit/constants/config.d.ts

@@ -0,0 +1,155 @@
+import { type SchemaRendererConfig } from '../../core';
+export declare const untypedConfig: {
+    readonly any: {
+        readonly controls: {
+            readonly date_input: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaAny<any>, import("../controls").DateInputProps, {}>>;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+            readonly accordeon: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").AccordeonProps>>;
+        };
+        readonly validators: {};
+    };
+    readonly array: {
+        readonly controls: {
+            readonly base: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaArray<any>, import("../controls").ArrayBaseProps, {}>>;
+            };
+            readonly checkbox_group: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaArray<any>, import("../controls").CheckboxGroupProps, {}>>;
+            };
+            readonly select: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaArray<any>, import("../controls").MultiSelectProps, {}>>;
+            };
+            readonly array_table: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaArray<any>, import("../controls").ArrayTableProps, {}>>;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+            readonly accordeon: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").AccordeonProps>>;
+        };
+        readonly validators: {};
+    };
+    readonly boolean: {
+        readonly controls: {
+            readonly base: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaBoolean<any>, import("../controls").CheckboxProps, {}>>;
+            };
+            readonly switch: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaBoolean<any>, import("../controls").SwitchProps, {}>>;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+        };
+        readonly validators: {};
+    };
+    readonly number: {
+        readonly controls: {
+            readonly base: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaNumber<any>, import("../controls").NumberBaseProps, {}>>;
+            };
+            readonly slider: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaNumber<any>, import("../controls").SliderProps, {}>>;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+            readonly accordeon: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").AccordeonProps>>;
+        };
+        readonly validators: {};
+    };
+    readonly object: {
+        readonly controls: {
+            readonly base: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").ObjectBaseProps, {}>>;
+            };
+            readonly inline: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").ObjectInlineProps, {}>>;
+            };
+            readonly dot_value: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").DotValueProps, {}>>;
+            };
+            readonly range_slider: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").RangeSliderProps, {}>>;
+            };
+            readonly one_of_nested: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").OneOfNestedProps, {}>>;
+                readonly independent: true;
+            };
+            readonly few_of_nested: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaObject<any>, import("../controls").FewOfNestedProps, {}>>;
+                readonly independent: true;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+            readonly accordeon: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").AccordeonProps>>;
+        };
+        readonly validators: {};
+    };
+    readonly string: {
+        readonly controls: {
+            readonly base: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").StringBaseProps, {}>>;
+            };
+            readonly color_picker: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").ColorPickerProps, {}>>;
+            };
+            readonly file: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").FileInputProps, {}>>;
+            };
+            readonly password: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").PasswordProps, {}>>;
+            };
+            readonly radio_group: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").RadioGroupProps, {}>>;
+            };
+            readonly segmented_radio_group: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").SegmentedRadioGroupProps, {}>>;
+            };
+            readonly select: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").SelectProps, {}>>;
+            };
+            readonly textarea: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").TextAreaProps, {}>>;
+            };
+            readonly text_content: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").TextContentProps, {}>>;
+            };
+            readonly label: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").LabelProps, {}>>;
+            };
+            readonly alert: {
+                readonly Component: import("react").NamedExoticComponent<import("../../core").ControlProps<import("../../core").JsonSchemaString<any>, import("../controls").AlertProps, {}>>;
+            };
+        };
+        readonly views: {};
+        readonly wrappers: {
+            readonly row: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").RowProps>>;
+            readonly section: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").SectionProps>>;
+            readonly transparent: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, {}>>;
+            readonly accordeon: import("react").NamedExoticComponent<import("../../core").WrapperProps<import("../../core").JsonSchema, import("../wrappers").AccordeonProps>>;
+        };
+        readonly validators: {};
+    };
+};
+export declare const config: SchemaRendererConfig;

package/build/cjs/lib/unstable/kit/constants/config.js

@@ -8,7 +8,12 @@ exports.untypedConfig = {
     [core_1.EntityType.Any]: {
         controls: { date_input: { Component: controls_1.DateInput } },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+            accordeon: wrappers_1.Accordeon,
+        },
         validators: {},
     },
     [core_1.EntityType.Array]: {
@@ -16,15 +21,25 @@ exports.untypedConfig = {
             base: { Component: controls_1.ArrayBase },
             checkbox_group: { Component: controls_1.CheckboxGroup },
             select: { Component: controls_1.MultiSelect },
+            array_table: { Component: controls_1.ArrayTable },
         },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+            accordeon: wrappers_1.Accordeon,
+        },
         validators: {},
     },
     [core_1.EntityType.Boolean]: {
         controls: { base: { Component: controls_1.Checkbox }, switch: { Component: controls_1.Switch } },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+        },
         validators: {},
     },
     [core_1.EntityType.Number]: {
@@ -33,29 +48,53 @@ exports.untypedConfig = {
             slider: { Component: controls_1.Slider },
         },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+            accordeon: wrappers_1.Accordeon,
+        },
         validators: {},
     },
     [core_1.EntityType.Object]: {
         controls: {
             base: { Component: controls_1.ObjectBase },
+            inline: { Component: controls_1.ObjectInline },
+            dot_value: { Component: controls_1.DotValue },
             range_slider: { Component: controls_1.RangeSlider },
+            one_of_nested: { Component: controls_1.OneOfNested, independent: true },
+            few_of_nested: { Component: controls_1.FewOfNested, independent: true },
         },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+            accordeon: wrappers_1.Accordeon,
+        },
         validators: {},
     },
     [core_1.EntityType.String]: {
         controls: {
             base: { Component: controls_1.StringBase },
             color_picker: { Component: controls_1.ColorPicker },
+            file: { Component: controls_1.FileInput },
             password: { Component: controls_1.Password },
             radio_group: { Component: controls_1.RadioGroup },
+            segmented_radio_group: { Component: controls_1.SegmentedRadioGroup },
             select: { Component: controls_1.Select },
             textarea: { Component: controls_1.TextArea },
+            text_content: { Component: controls_1.TextContent },
+            label: { Component: controls_1.Label },
+            alert: { Component: controls_1.Alert },
         },
         views: {},
-        wrappers: { row: wrappers_1.Row, transparent: wrappers_1.Transparent },
+        wrappers: {
+            row: wrappers_1.Row,
+            section: wrappers_1.Section,
+            transparent: wrappers_1.Transparent,
+            accordeon: wrappers_1.Accordeon,
+        },
         validators: {},
     },
 };

package/build/cjs/lib/unstable/kit/constants/index.d.ts

@@ -0,0 +1 @@
+export { config, untypedConfig } from './config';

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = 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, schema }) => {
+    const { iconName, iconProps, message } = controlProps, controlRestProps = tslib_1.__rest(controlProps, ["iconName", "iconProps", "message"]);
+    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 msg = react_1.default.useMemo(() => {
+        if (message) {
+            if (typeof message === 'string') {
+                return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: message } });
+            }
+            return message;
+        }
+        if (schema.description) {
+            return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [message, schema.description]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit" },
+        react_1.default.createElement(uikit_1.Alert, Object.assign({ icon: icon, message: msg }, controlRestProps))));
+};
+exports.Alert = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { Alert, type AlertProps } from './Alert';

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type JsonSchemaArray } from '../../../core';
+export interface ArrayBaseProps {
+    addButtonText?: string;
+    addButtonPosition?: string;
+    disabled?: boolean;
+}
+export declare const ArrayBase: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaArray<any>, ArrayBaseProps, {}>>;

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

@@ -7,40 +7,43 @@ 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, }) => {
-    var _a;
+const Component = ({ controlProps, input, schema }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
     const addButton = react_1.default.useMemo(() => {
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema)) {
             return null;
         }
-        const onClick = () => input.onChange([...(input.value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
-        return (react_1.default.createElement(uikit_1.Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${input.name}-add-button` },
+        const onClick = () => {
+            onFocus();
+            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onBlur();
+        };
+        return (react_1.default.createElement(uikit_1.Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${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,
-        input.value,
-        schema.default,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
         schema.items,
         schema.readOnly,
+        value,
     ]);
     const items = react_1.default.useMemo(() => {
-        var _a;
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema)) {
-            return itemsSchema.map((item, index) => (react_1.default.createElement(core_1.Entity, { name: `${input.name}[${index}]`, schema: item, key: index })));
+            return itemsSchema.map((item, index) => (react_1.default.createElement(core_1.Entity, { name: `${name}[${index}]`, schema: item, key: index })));
         }
-        return new Array((_a = input.value) === null || _a === void 0 ? void 0 : _a.length)
+        return new Array(value === null || value === void 0 ? void 0 : value.length)
             .fill(null)
-            .map((_, index) => (react_1.default.createElement(core_1.Entity, { name: `${input.name}[${index}]`, schema: itemsSchema, key: index })));
-    }, [input.name, (_a = input.value) === null || _a === void 0 ? void 0 : _a.length, schema.items]);
-    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" }, items),
-            addButton)));
+            .map((_, index) => (react_1.default.createElement(core_1.Entity, { name: `${name}[${index}]`, schema: itemsSchema, key: index })));
+    }, [name, schema.items, value === null || value === void 0 ? void 0 : value.length]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "by-child", gap: 4 },
+        react_1.default.createElement(uikit_1.Flex, { direction: "column" }, items),
+        addButton));
 };
 exports.ArrayBase = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export * from './ArrayBase';

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

@@ -0,0 +1,39 @@
+.sr-array-table__row {
+  width: 100%;
+  display: grid;
+  align-items: start;
+  grid-template-columns: 28px repeat(var(--columns-count), 1fr);
+  gap: calc(var(--g-spacing-base) * 3);
+  padding: calc(var(--g-spacing-base) * 2) 0;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.sr-array-table__row_head {
+  align-items: center;
+}
+.sr-array-table__row_with-remove-button {
+  grid-template-columns: 28px repeat(var(--columns-count), 1fr) 28px;
+}
+.sr-array-table__row:last-of-type {
+  border-bottom: none;
+}
+.sr-array-table__cell {
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}
+.sr-array-table__index {
+  margin: 0 auto;
+}
+.sr-array-table__column-title {
+  display: flex;
+  align-items: center;
+  gap: 0 calc(var(--g-spacing-base) * 0.5);
+  flex-wrap: wrap;
+}
+.sr-array-table__column-title-word {
+  display: flex;
+  align-items: center;
+  gap: 0 calc(var(--g-spacing-base) * 1);
+  flex-wrap: wrap;
+}

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

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

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayTable = 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 b = (0, utils_1.block)('array-table');
+const Component = ({ controlProps, input, schema }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const addButton = react_1.default.useMemo(() => {
+        const itemsSchema = schema.items;
+        if (Array.isArray(itemsSchema)) {
+            return null;
+        }
+        const onClick = () => {
+            onFocus();
+            onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
+            onBlur();
+        };
+        return (react_1.default.createElement(uikit_1.Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${name}-add-button` },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            controlProps.addButtonText || null));
+    }, [
+        controlProps.addButtonText,
+        controlProps.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const columns = react_1.default.useMemo(() => {
+        const columns = [];
+        const itemsSchema = schema.items;
+        if (itemsSchema) {
+            const itemSchema = Array.isArray(itemsSchema) ? itemsSchema[0] : itemsSchema;
+            if ('properties' in itemSchema &&
+                itemSchema.properties &&
+                Object.keys(itemSchema.properties).length > 0) {
+                const properties = itemSchema.properties;
+                (controlProps.order || Object.keys(properties)).forEach((columnKey) => {
+                    columns.push({ name: columnKey, schema: properties[columnKey] || {} });
+                });
+            }
+            else {
+                columns.push({ name: undefined, schema: itemSchema });
+            }
+        }
+        return columns;
+    }, [controlProps.order, schema.items]);
+    const { head, rows } = react_1.default.useMemo(() => {
+        let rowsCount = value === null || value === void 0 ? void 0 : value.length;
+        let withRemoveButton = true;
+        if (Array.isArray(schema.items)) {
+            rowsCount = schema.items.length;
+            withRemoveButton = false;
+        }
+        const head = (react_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length } },
+            react_1.default.createElement("div", { className: b('cell') },
+                react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, "#")),
+            columns.map((column, cIndex) => {
+                var _a;
+                return (react_1.default.createElement("div", { className: b('cell'), key: cIndex },
+                    react_1.default.createElement("div", { className: b('column-title') }, (_a = column.schema.title) === null || _a === void 0 ? void 0 : _a.split(' ').map((word, wIndex, array) => (react_1.default.createElement("div", { className: b('column-title-word'), key: word },
+                        react_1.default.createElement(uikit_1.Text, { variant: "subheader-1" }, word),
+                        wIndex + 1 === array.length && column.schema.description ? (react_1.default.createElement(uikit_1.HelpMark, null, column.schema.description)) : null))))));
+            })));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (react_1.default.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
+            react_1.default.createElement("div", { className: b('cell') },
+                react_1.default.createElement(uikit_1.Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+            columns.map((column, cIndex) => (react_1.default.createElement("div", { className: b('cell'), key: cIndex },
+                react_1.default.createElement(core_1.Entity, { name: `${name}[${rIndex}]${column.name === undefined ? '' : `.${column.name}`}`, schema: column.schema })))),
+            withRemoveButton ? (react_1.default.createElement("div", { className: b('cell') },
+                react_1.default.createElement(components_1.ArrayRemoveButton, { name: `${name}[${rIndex}]` }))) : null)));
+        return { head, rows };
+    }, [columns, name, schema.items, value === null || value === void 0 ? void 0 : value.length]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "by-child", gap: 2 },
+        head,
+        rows,
+        addButton));
+};
+exports.ArrayTable = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { ArrayTable, type ArrayTableProps } from './ArrayTable';

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

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

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

@@ -1,5 +1,11 @@
 .sr-checkbox {
   min-height: 28px;
   display: flex;
-  align-items: center;
+  justify-content: center;
+}
+.sr-checkbox_error .g-control-label .g-checkbox__indicator:hover::before {
+  border: 1px solid var(--g-color-text-danger);
+}
+.sr-checkbox_error .g-control-label .g-checkbox__indicator::before {
+  border: 1px solid var(--g-color-text-danger);
 }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type CheckboxProps as UIKitCheckboxProps } from '@gravity-ui/uikit';
+import type { JsonSchemaBoolean } from '../../../core';
+export interface CheckboxProps extends Omit<UIKitCheckboxProps, 'checked' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
+}
+export declare const Checkbox: React.NamedExoticComponent<import("../../../core").ControlProps<JsonSchemaBoolean<any>, CheckboxProps, {}>>;