@gravity-ui/dynamic-forms 5.19.0 → 5.20.0

package/build/esm/lib/unstable/kit/components/ControlContainer/index.js

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

package/build/esm/lib/unstable/kit/components/ControlError/ControlError.css

@@ -1,33 +1,3 @@
-.sr-control-error__children {
-  width: 100%;
-}
-.sr-control-error__children_errors .g-control-label:not(.g-control-label_disabled) .g-checkbox__indicator:hover::before {
-  border: 1px solid var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-control-label:not(.g-control-label_disabled) .g-checkbox__indicator::before {
-  border: 1px solid var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-text-input:not(.g-text-input_disabled) .g-text-input__content {
-  border-color: var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-text-input:not(.g-text-input_disabled) .g-text-input__content:hover {
-  border-color: var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-text-area__content {
-  border-color: var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-text-area__content:hover {
-  border-color: var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-select-control:not(.g-select-control_disabled) .g-select-control__button:hover::before {
-  border: 1px solid var(--g-color-text-danger) !important;
-}
-.sr-control-error__children_errors .g-select-control:not(.g-select-control_disabled) .g-select-control__button::before {
-  border: 1px solid var(--g-color-text-danger) !important;
-}
-.sr-control-error__children_errors .g-segmented-radio-group:not([aria-disabled=true]) .g-segmented-radio-group__option_checked:hover::after {
-  border: 1px solid var(--g-color-text-danger);
-}
-.sr-control-error__children_errors .g-segmented-radio-group:not([aria-disabled=true]) .g-segmented-radio-group__option_checked::after {
-  border: 1px solid var(--g-color-text-danger);
+.sr-control-error {
+  margin-top: 2px;
 }

package/build/esm/lib/unstable/kit/components/ControlError/ControlError.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 import './ControlError.css';
 export interface ControlErrorProps {
-    className?: string;
     errorMessage?: string;
     validationState?: 'invalid';
-    children: React.ReactNode;
 }
 export declare const ControlError: React.FC<ControlErrorProps>;

package/build/esm/lib/unstable/kit/components/ControlError/ControlError.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Flex, Text } from '@gravity-ui/uikit';
+import { Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import './ControlError.css';
 const b = block('control-error');
-export const ControlError = ({ className, errorMessage, validationState, children, }) => {
-    const error = validationState === 'invalid' && errorMessage ? (React.createElement(Text, { color: "danger" }, errorMessage)) : null;
-    return (React.createElement(Flex, { className: b(null, className), width: "100%", direction: "column", alignItems: "flex-start" },
-        React.createElement("div", { className: b('children', { errors: Boolean(error) }) }, children),
-        error));
+export const ControlError = ({ errorMessage, validationState }) => {
+    if (validationState === 'invalid' && errorMessage) {
+        return (React.createElement(Text, { className: b(), color: "danger" }, errorMessage));
+    }
+    return null;
 };

package/build/esm/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/esm/lib/unstable/kit/components/WrapperContainer/WrapperContainer.d.ts

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

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

@@ -0,0 +1,11 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './WrapperContainer.css';
+const b = block('wrapper-container');
+const Component = (_a) => {
+    var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
+    return (React.createElement(Flex, Object.assign({ className: b(null, className), direction: "column" }, restProps), children));
+};
+export const WrapperContainer = React.memo(Component);

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

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

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

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

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

@@ -1,3 +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/esm/lib/unstable/kit/components/index.js

@@ -1,3 +1,5 @@
 export { ArrayRemoveButton } from './ArrayRemoveButton';
+export { ControlContainer } from './ControlContainer';
 export { ControlError } from './ControlError';
 export { HTMLContent } from './HTMLContent';
+export { WrapperContainer } from './WrapperContainer';

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

@@ -9,7 +9,9 @@ export declare const untypedConfig: {
         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: {};
     };
@@ -24,11 +26,16 @@ export declare const untypedConfig: {
             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: {};
     };
@@ -44,6 +51,7 @@ export declare const untypedConfig: {
         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: {};
@@ -60,7 +68,9 @@ export declare const untypedConfig: {
         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: {};
     };
@@ -69,14 +79,30 @@ export declare const untypedConfig: {
             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: {};
     };
@@ -88,23 +114,40 @@ export declare const untypedConfig: {
             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: {};
     };

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

@@ -1,11 +1,16 @@
 import { EntityType } from '../../core';
-import { ArrayBase, Checkbox, CheckboxGroup, ColorPicker, DateInput, MultiSelect, NumberBase, ObjectBase, Password, RadioGroup, RangeSlider, Select, Slider, StringBase, Switch, TextArea, } from '../controls';
-import { Row, Transparent } from '../wrappers';
+import { Alert, ArrayBase, ArrayTable, Checkbox, CheckboxGroup, ColorPicker, DateInput, DotValue, FewOfNested, FileInput, Label, MultiSelect, NumberBase, ObjectBase, ObjectInline, OneOfNested, Password, RadioGroup, RangeSlider, SegmentedRadioGroup, Select, Slider, StringBase, Switch, TextArea, TextContent, } from '../controls';
+import { Accordeon, Row, Section, Transparent } from '../wrappers';
 export const untypedConfig = {
     [EntityType.Any]: {
         controls: { date_input: { Component: DateInput } },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+            accordeon: Accordeon,
+        },
         validators: {},
     },
     [EntityType.Array]: {
@@ -13,15 +18,25 @@ export const untypedConfig = {
             base: { Component: ArrayBase },
             checkbox_group: { Component: CheckboxGroup },
             select: { Component: MultiSelect },
+            array_table: { Component: ArrayTable },
         },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+            accordeon: Accordeon,
+        },
         validators: {},
     },
     [EntityType.Boolean]: {
         controls: { base: { Component: Checkbox }, switch: { Component: Switch } },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+        },
         validators: {},
     },
     [EntityType.Number]: {
@@ -30,29 +45,53 @@ export const untypedConfig = {
             slider: { Component: Slider },
         },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+            accordeon: Accordeon,
+        },
         validators: {},
     },
     [EntityType.Object]: {
         controls: {
             base: { Component: ObjectBase },
+            inline: { Component: ObjectInline },
+            dot_value: { Component: DotValue },
             range_slider: { Component: RangeSlider },
+            one_of_nested: { Component: OneOfNested, independent: true },
+            few_of_nested: { Component: FewOfNested, independent: true },
         },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+            accordeon: Accordeon,
+        },
         validators: {},
     },
     [EntityType.String]: {
         controls: {
             base: { Component: StringBase },
             color_picker: { Component: ColorPicker },
+            file: { Component: FileInput },
             password: { Component: Password },
             radio_group: { Component: RadioGroup },
+            segmented_radio_group: { Component: SegmentedRadioGroup },
             select: { Component: Select },
             textarea: { Component: TextArea },
+            text_content: { Component: TextContent },
+            label: { Component: Label },
+            alert: { Component: Alert },
         },
         views: {},
-        wrappers: { row: Row, transparent: Transparent },
+        wrappers: {
+            row: Row,
+            section: Section,
+            transparent: Transparent,
+            accordeon: Accordeon,
+        },
         validators: {},
     },
 };

package/build/esm/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/esm/lib/unstable/kit/controls/Alert/Alert.js

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+import React from 'react';
+import * as icons from '@gravity-ui/icons';
+import { Icon, Alert as UIKitAlert, } from '@gravity-ui/uikit';
+import { ControlContainer } from '../../components';
+const Component = ({ controlProps, schema }) => {
+    const { iconName, iconProps, message } = controlProps, controlRestProps = __rest(controlProps, ["iconName", "iconProps", "message"]);
+    const icon = React.useMemo(() => iconName && icons[iconName] ? (React.createElement(Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
+    const msg = React.useMemo(() => {
+        if (message) {
+            if (typeof message === 'string') {
+                return React.createElement("span", { dangerouslySetInnerHTML: { __html: message } });
+            }
+            return message;
+        }
+        if (schema.description) {
+            return React.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [message, schema.description]);
+    return (React.createElement(ControlContainer, { stretch: "fit" },
+        React.createElement(UIKitAlert, Object.assign({ icon: icon, message: msg }, controlRestProps))));
+};
+export const Alert = React.memo(Component);

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

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

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

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

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

@@ -2,41 +2,44 @@ import React from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Button, Flex, Icon } from '@gravity-ui/uikit';
 import { Entity } from '../../../core';
-import { ControlError } from '../../components';
-import { getValidationState } from '../../utils';
-const Component = ({ controlProps, input, meta, schema, }) => {
-    var _a;
+import { ControlContainer } from '../../components';
+const Component = ({ controlProps, input, schema }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
     const addButton = React.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.createElement(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.createElement(Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${name}-add-button` },
             React.createElement(Icon, { data: 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.useMemo(() => {
-        var _a;
         const itemsSchema = schema.items;
         if (Array.isArray(itemsSchema)) {
-            return itemsSchema.map((item, index) => (React.createElement(Entity, { name: `${input.name}[${index}]`, schema: item, key: index })));
+            return itemsSchema.map((item, index) => (React.createElement(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.createElement(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.createElement(ControlError, { errorMessage: meta.error, validationState: getValidationState(meta) },
-        React.createElement(Flex, { direction: "column", gap: 2 },
-            React.createElement(Flex, { direction: "column" }, items),
-            addButton)));
+            .map((_, index) => (React.createElement(Entity, { name: `${name}[${index}]`, schema: itemsSchema, key: index })));
+    }, [name, schema.items, value === null || value === void 0 ? void 0 : value.length]);
+    return (React.createElement(ControlContainer, { stretch: "by-child", gap: 4 },
+        React.createElement(Flex, { direction: "column" }, items),
+        addButton));
 };
 export const ArrayBase = React.memo(Component);

package/build/esm/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/esm/lib/unstable/kit/controls/ArrayTable/ArrayTable.d.ts

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

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, HelpMark, Icon, Text } from '@gravity-ui/uikit';
+import { Entity } from '../../../core';
+import { ArrayRemoveButton, ControlContainer } from '../../components';
+import { block } from '../../utils';
+import './ArrayTable.css';
+const b = block('array-table');
+const Component = ({ controlProps, input, schema }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const addButton = React.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.createElement(Button, { onClick: onClick, disabled: controlProps.disabled || schema.readOnly, qa: `${name}-add-button` },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            controlProps.addButtonText || null));
+    }, [
+        controlProps.addButtonText,
+        controlProps.disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        schema.items,
+        schema.readOnly,
+        value,
+    ]);
+    const columns = React.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.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.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length } },
+            React.createElement("div", { className: b('cell') },
+                React.createElement(Text, { className: b('index'), variant: "subheader-1" }, "#")),
+            columns.map((column, cIndex) => {
+                var _a;
+                return (React.createElement("div", { className: b('cell'), key: cIndex },
+                    React.createElement("div", { className: b('column-title') }, (_a = column.schema.title) === null || _a === void 0 ? void 0 : _a.split(' ').map((word, wIndex, array) => (React.createElement("div", { className: b('column-title-word'), key: word },
+                        React.createElement(Text, { variant: "subheader-1" }, word),
+                        wIndex + 1 === array.length && column.schema.description ? (React.createElement(HelpMark, null, column.schema.description)) : null))))));
+            })));
+        const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
+            React.createElement("div", { className: b('cell') },
+                React.createElement(Text, { className: b('index'), variant: "subheader-1" }, rIndex + 1)),
+            columns.map((column, cIndex) => (React.createElement("div", { className: b('cell'), key: cIndex },
+                React.createElement(Entity, { name: `${name}[${rIndex}]${column.name === undefined ? '' : `.${column.name}`}`, schema: column.schema })))),
+            withRemoveButton ? (React.createElement("div", { className: b('cell') },
+                React.createElement(ArrayRemoveButton, { name: `${name}[${rIndex}]` }))) : null)));
+        return { head, rows };
+    }, [columns, name, schema.items, value === null || value === void 0 ? void 0 : value.length]);
+    return (React.createElement(ControlContainer, { stretch: "by-child", gap: 2 },
+        head,
+        rows,
+        addButton));
+};
+export const ArrayTable = React.memo(Component);

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

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

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

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

package/build/esm/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/esm/lib/unstable/kit/controls/Checkbox/Checkbox.d.ts

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