@gravity-ui/dynamic-forms 5.19.1 → 5.20.0

package/build/esm/lib/unstable/core/index.d.ts

@@ -1,5 +1,5 @@
-export { Entity, type EntityProps, type EntityState } from './Entity';
+export { Entity, type EntityProps, type EntityState, getRenderKit } from './Entity';
 export { SchemaRenderer, type SchemaRendererProps } from './SchemaRenderer';
 export { EntityType, JsonSchemaType, SchemaRendererMode } from './constants';
 export type * from './types';
-export { schemaRendererMutators, type UseSchemaRendererParams, type UseSchemaRendererReturn, useSchemaRenderer, useSchemaRendererMutators, } from './useSchemaRenderer';
+export { schemaRendererMutators, useEntitiesState, type UseSchemaRendererParams, type UseSchemaRendererReturn, useSchemaRenderer, useSchemaRendererMutators, } from './useSchemaRenderer';

package/build/esm/lib/unstable/core/index.js

@@ -1,4 +1,4 @@
-export { Entity } from './Entity';
+export { Entity, getRenderKit } from './Entity';
 export { SchemaRenderer } from './SchemaRenderer';
 export { EntityType, JsonSchemaType, SchemaRendererMode } from './constants';
-export { schemaRendererMutators, useSchemaRenderer, useSchemaRendererMutators, } from './useSchemaRenderer';
+export { schemaRendererMutators, useEntitiesState, useSchemaRenderer, useSchemaRendererMutators, } from './useSchemaRenderer';

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ArrayRemoveButtonProps {
     name: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const ArrayRemoveButton: React.FC<ArrayRemoveButtonProps>;

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

@@ -3,21 +3,28 @@ import { TrashBin } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { useForm } from 'react-final-form';
 import { getArrayItemIndex, getArrayItemParentName, isArrayItem, isTupleItem } from '../../utils';
-export const ArrayRemoveButton = ({ name }) => {
+export const ArrayRemoveButton = ({ name, onClick }) => {
     const form = useForm();
+    const [ready, setReady] = React.useState(false);
     const arrayItem = isArrayItem(name);
     const tupleItem = isTupleItem(name, form);
-    const removeItem = React.useCallback(() => {
+    const removeItem = React.useCallback((event) => {
         var _a;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         const parentName = getArrayItemParentName(name);
         const parentValue = (_a = form.getFieldState(parentName)) === null || _a === void 0 ? void 0 : _a.value;
         const index = Number(getArrayItemIndex(name));
         if (Array.isArray(parentValue)) {
+            form.focus(parentName);
             form.change(parentName, parentValue.filter((_, i) => i !== index));
+            form.blur(parentName);
         }
-    }, [form, name]);
-    if (arrayItem && !tupleItem) {
-        return (React.createElement(Button, { view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-item` },
+    }, [form, name, onClick]);
+    React.useLayoutEffect(() => {
+        setReady(true);
+    }, []);
+    if (ready && arrayItem && !tupleItem) {
+        return (React.createElement(Button, { view: "flat-secondary", onClick: removeItem, qa: `${name}-remove-button` },
             React.createElement(Icon, { data: TrashBin, size: 16 })));
     }
     return null;

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

@@ -0,0 +1,20 @@
+.sr-control-container {
+  display: flex;
+  flex-direction: column;
+}
+.sr-control-container_stretch_max {
+  width: 100%;
+  flex: 1 0 0;
+}
+.sr-control-container_stretch_fit {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+.sr-control-container_stretch_by-child {
+  width: fit-content;
+  flex: 0 0 auto;
+}
+.sr-control-container_stretch_by-child:has([data-stretch=max]) {
+  width: 100%;
+  flex: 1 0 0;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type FlexProps } from '@gravity-ui/uikit';
+import './ControlContainer.css';
+export interface ControlContainerProps extends FlexProps {
+    stretch: 'max' | 'fit' | 'by-child';
+    children: React.ReactNode;
+}
+export declare const ControlContainer: React.NamedExoticComponent<ControlContainerProps>;

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

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Flex } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './ControlContainer.css';
+const b = block('control-container');
+const Component = (_a) => {
+    var { stretch, children } = _a, restFlexProps = __rest(_a, ["stretch", "children"]);
+    return (React.createElement("div", { className: b({ stretch }), "data-stretch": stretch },
+        React.createElement(Flex, Object.assign({ direction: "column" }, restFlexProps, { grow: 1 }), children)));
+};
+export const ControlContainer = React.memo(Component);

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

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

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, {}>>;