@gravity-ui/dynamic-forms 5.19.0 → 5.20.0

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

@@ -0,0 +1,10 @@
+.sr-text-content {
+  border: none;
+  box-shadow: none;
+}
+.sr-text-content.g-label:not(:has(.g-label__addon_side_start)) .g-label__text {
+  margin-left: 0;
+}
+.sr-text-content.g-label .g-label__separator {
+  margin-left: 0;
+}

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContent = 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 utils_1 = require("../../utils");
+const b = (0, utils_1.block)('text-content');
+const Component = ({ controlProps, input, schema }) => {
+    const { iconName, iconProps, title: titleProp } = controlProps, controlRestProps = tslib_1.__rest(controlProps, ["iconName", "iconProps", "title"]);
+    const icon = react_1.default.useMemo(() => iconName && icons[iconName] ? (react_1.default.createElement(uikit_1.Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
+    const content = react_1.default.useMemo(() => {
+        if (titleProp) {
+            if (typeof titleProp === 'string') {
+                return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: titleProp } });
+            }
+            return titleProp;
+        }
+        if (schema.description) {
+            return react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
+        }
+        return undefined;
+    }, [titleProp, schema.description]);
+    return (react_1.default.createElement(components_1.ControlContainer, { stretch: "fit" },
+        react_1.default.createElement(uikit_1.Label, Object.assign({ size: "m", value: input.value, icon: icon }, controlRestProps, { className: b(null, controlRestProps.className), theme: "clear" }), content)));
+};
+exports.TextContent = react_1.default.memo(Component);

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

@@ -0,0 +1 @@
+export { TextContent, type TextContentProps } from './TextContent';

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

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

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

@@ -0,0 +1,26 @@
+export { Alert, type AlertProps } from './Alert';
+export { ArrayBase, type ArrayBaseProps } from './ArrayBase';
+export { ArrayTable, type ArrayTableProps } from './ArrayTable';
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup';
+export { ColorPicker, type ColorPickerProps } from './ColorPicker';
+export { DateInput, type DateInputProps } from './DateInput';
+export { FewOfNested, type FewOfNestedProps } from './FewOfNested';
+export { FileInput, type FileInputProps } from './FileInput';
+export { Label, type LabelProps } from './Label';
+export { MultiSelect, type MultiSelectProps } from './MultiSelect';
+export { NumberBase, type NumberBaseProps } from './NumberBase';
+export { ObjectBase, type ObjectBaseProps } from './ObjectBase';
+export { ObjectInline, type ObjectInlineProps } from './ObjectInline';
+export { OneOfNested, type OneOfNestedProps } from './OneOfNested';
+export { DotValue, type DotValueProps } from './DotValue';
+export { Password, type PasswordProps } from './Password';
+export { RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { RangeSlider, type RangeSliderProps } from './RangeSlider';
+export { Select, type SelectProps } from './Select';
+export { SegmentedRadioGroup, type SegmentedRadioGroupProps } from './SegmentedRadioGroup';
+export { Slider, type SliderProps } from './Slider';
+export { StringBase, type StringBaseProps } from './StringBase';
+export { Switch, type SwitchProps } from './Switch';
+export { TextArea, type TextAreaProps } from './TextArea';
+export { TextContent, type TextContentProps } from './TextContent';

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = exports.Switch = exports.StringBase = exports.Slider = exports.Select = exports.RangeSlider = exports.RadioGroup = exports.Password = exports.ObjectBase = exports.NumberBase = exports.MultiSelect = exports.DateInput = exports.ColorPicker = exports.CheckboxGroup = exports.Checkbox = exports.ArrayBase = void 0;
+exports.TextContent = exports.TextArea = exports.Switch = exports.StringBase = exports.Slider = exports.SegmentedRadioGroup = exports.Select = exports.RangeSlider = exports.RadioGroup = exports.Password = exports.DotValue = exports.OneOfNested = exports.ObjectInline = exports.ObjectBase = exports.NumberBase = exports.MultiSelect = exports.Label = exports.FileInput = exports.FewOfNested = exports.DateInput = exports.ColorPicker = exports.CheckboxGroup = exports.Checkbox = exports.ArrayTable = exports.ArrayBase = exports.Alert = void 0;
+var Alert_1 = require("./Alert");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
 var ArrayBase_1 = require("./ArrayBase");
 Object.defineProperty(exports, "ArrayBase", { enumerable: true, get: function () { return ArrayBase_1.ArrayBase; } });
+var ArrayTable_1 = require("./ArrayTable");
+Object.defineProperty(exports, "ArrayTable", { enumerable: true, get: function () { return ArrayTable_1.ArrayTable; } });
 var Checkbox_1 = require("./Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
 var CheckboxGroup_1 = require("./CheckboxGroup");
@@ -11,12 +15,24 @@ var ColorPicker_1 = require("./ColorPicker");
 Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });
 var DateInput_1 = require("./DateInput");
 Object.defineProperty(exports, "DateInput", { enumerable: true, get: function () { return DateInput_1.DateInput; } });
+var FewOfNested_1 = require("./FewOfNested");
+Object.defineProperty(exports, "FewOfNested", { enumerable: true, get: function () { return FewOfNested_1.FewOfNested; } });
+var FileInput_1 = require("./FileInput");
+Object.defineProperty(exports, "FileInput", { enumerable: true, get: function () { return FileInput_1.FileInput; } });
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
 var MultiSelect_1 = require("./MultiSelect");
 Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });
 var NumberBase_1 = require("./NumberBase");
 Object.defineProperty(exports, "NumberBase", { enumerable: true, get: function () { return NumberBase_1.NumberBase; } });
 var ObjectBase_1 = require("./ObjectBase");
 Object.defineProperty(exports, "ObjectBase", { enumerable: true, get: function () { return ObjectBase_1.ObjectBase; } });
+var ObjectInline_1 = require("./ObjectInline");
+Object.defineProperty(exports, "ObjectInline", { enumerable: true, get: function () { return ObjectInline_1.ObjectInline; } });
+var OneOfNested_1 = require("./OneOfNested");
+Object.defineProperty(exports, "OneOfNested", { enumerable: true, get: function () { return OneOfNested_1.OneOfNested; } });
+var DotValue_1 = require("./DotValue");
+Object.defineProperty(exports, "DotValue", { enumerable: true, get: function () { return DotValue_1.DotValue; } });
 var Password_1 = require("./Password");
 Object.defineProperty(exports, "Password", { enumerable: true, get: function () { return Password_1.Password; } });
 var RadioGroup_1 = require("./RadioGroup");
@@ -25,6 +41,8 @@ var RangeSlider_1 = require("./RangeSlider");
 Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return RangeSlider_1.RangeSlider; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var SegmentedRadioGroup_1 = require("./SegmentedRadioGroup");
+Object.defineProperty(exports, "SegmentedRadioGroup", { enumerable: true, get: function () { return SegmentedRadioGroup_1.SegmentedRadioGroup; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var StringBase_1 = require("./StringBase");
@@ -33,3 +51,5 @@ var Switch_1 = require("./Switch");
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
 var TextArea_1 = require("./TextArea");
 Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return TextArea_1.TextArea; } });
+var TextContent_1 = require("./TextContent");
+Object.defineProperty(exports, "TextContent", { enumerable: true, get: function () { return TextContent_1.TextContent; } });

package/build/cjs/lib/unstable/kit/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/build/cjs/lib/unstable/kit/utils/common.d.ts

@@ -0,0 +1,8 @@
+import type { FormApi } from 'final-form';
+import type { FieldMetaState } from 'react-final-form';
+export declare const getValidationState: (meta: FieldMetaState<any>) => "invalid" | undefined;
+export declare const getBooleanValidationState: (meta: FieldMetaState<any>) => boolean;
+export declare const getArrayItemParentName: (name: string) => string;
+export declare const getArrayItemIndex: (name: string) => string;
+export declare const isArrayItem: (name: string) => boolean;
+export declare const isTupleItem: (name: string, form: FormApi) => boolean;

package/build/cjs/lib/unstable/kit/utils/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTupleItem = exports.isArrayItem = exports.getArrayItemIndex = exports.getArrayItemParentName = exports.getValidationState = void 0;
+exports.isTupleItem = exports.isArrayItem = exports.getArrayItemIndex = exports.getArrayItemParentName = exports.getBooleanValidationState = exports.getValidationState = void 0;
 const getValidationState = (meta) => {
     if ((meta.touched || meta.submitFailed) && meta.error) {
         return 'invalid';
@@ -8,6 +8,10 @@ const getValidationState = (meta) => {
     return undefined;
 };
 exports.getValidationState = getValidationState;
+const getBooleanValidationState = (meta) => {
+    return (0, exports.getValidationState)(meta) === 'invalid';
+};
+exports.getBooleanValidationState = getBooleanValidationState;
 const getArrayItemParentName = (name) => name.slice(0, name.lastIndexOf('['));
 exports.getArrayItemParentName = getArrayItemParentName;
 const getArrayItemIndex = (name) => name.slice(name.lastIndexOf('[') + 1, -1);

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

@@ -0,0 +1,2 @@
+export { block } from './cn';
+export { getArrayItemIndex, getArrayItemParentName, getBooleanValidationState, getValidationState, isArrayItem, isTupleItem, } from './common';

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTupleItem = exports.isArrayItem = exports.getValidationState = exports.getArrayItemParentName = exports.getArrayItemIndex = exports.block = void 0;
+exports.isTupleItem = exports.isArrayItem = exports.getValidationState = exports.getBooleanValidationState = exports.getArrayItemParentName = exports.getArrayItemIndex = exports.block = void 0;
 var cn_1 = require("./cn");
 Object.defineProperty(exports, "block", { enumerable: true, get: function () { return cn_1.block; } });
 var common_1 = require("./common");
 Object.defineProperty(exports, "getArrayItemIndex", { enumerable: true, get: function () { return common_1.getArrayItemIndex; } });
 Object.defineProperty(exports, "getArrayItemParentName", { enumerable: true, get: function () { return common_1.getArrayItemParentName; } });
+Object.defineProperty(exports, "getBooleanValidationState", { enumerable: true, get: function () { return common_1.getBooleanValidationState; } });
 Object.defineProperty(exports, "getValidationState", { enumerable: true, get: function () { return common_1.getValidationState; } });
 Object.defineProperty(exports, "isArrayItem", { enumerable: true, get: function () { return common_1.isArrayItem; } });
 Object.defineProperty(exports, "isTupleItem", { enumerable: true, get: function () { return common_1.isTupleItem; } });

package/build/cjs/lib/unstable/kit/wrappers/Accordeon/Accordeon.css

@@ -0,0 +1,35 @@
+.sr-accordeon {
+  margin-bottom: calc(var(--g-spacing-base) * 4);
+}
+.sr-accordeon:last-child {
+  margin-bottom: 0;
+}
+.sr-accordeon .g-disclosure__trigger {
+  padding-left: 6.5px;
+}
+.sr-accordeon_without-default-summary .g-disclosure__trigger {
+  padding-left: 0;
+}
+.sr-accordeon_without-default-summary .g-disclosure__trigger .g-arrow-toggle {
+  display: none;
+}
+.sr-accordeon__toggler {
+  padding-left: 6px;
+}
+.sr-accordeon__content {
+  margin-top: calc(var(--g-spacing-base) * 4);
+}
+.sr-accordeon__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-accordeon__content_with-indent:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: calc(100% + var(--g-spacing-base) * 2);
+  background-color: var(--g-color-line-generic);
+  position: absolute;
+  left: calc(var(--g-spacing-base) * 3 + 1.5px);
+  bottom: 0;
+}

package/build/cjs/lib/unstable/kit/wrappers/Accordeon/Accordeon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ButtonProps, type DisclosureProps, type TextProps } from '@gravity-ui/uikit';
+import type { JsonSchema } from '../../../core';
+export interface AccordeonProps extends DisclosureProps {
+    titleProps?: TextProps;
+    togglerProps?: ButtonProps;
+    withDefaultSummary?: boolean;
+    withIndent?: boolean;
+}
+export declare const Accordeon: React.NamedExoticComponent<import("../../../core").WrapperProps<JsonSchema, AccordeonProps>>;

package/build/cjs/lib/unstable/kit/wrappers/Accordeon/Accordeon.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordeon = 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 components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('accordeon');
+const Component = ({ children, input, meta, schema, wrapperProps, }) => {
+    const { withIndent = false, withDefaultSummary = false, titleProps, togglerProps } = wrapperProps, restWrapperProps = tslib_1.__rest(wrapperProps, ["withIndent", "withDefaultSummary", "titleProps", "togglerProps"]);
+    const summary = react_1.default.useMemo(() => {
+        const stopPropagation = (event) => {
+            event.stopPropagation();
+        };
+        return (react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2 },
+            withDefaultSummary ? (react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps), schema.title)) : (react_1.default.createElement(uikit_1.Disclosure.Summary, null, (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, togglerProps, { className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
+                react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2, height: "100%" },
+                    react_1.default.createElement(uikit_1.Icon, { data: props.expanded ? icons_1.ChevronUp : icons_1.ChevronDown }),
+                    react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps), schema.title)))))),
+            schema.description ? (react_1.default.createElement(uikit_1.HelpMark, { onClick: stopPropagation },
+                react_1.default.createElement(components_1.HTMLContent, { html: schema.description }))) : null,
+            react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, onClick: stopPropagation })));
+    }, [
+        input.name,
+        schema.title,
+        schema.description,
+        titleProps,
+        togglerProps,
+        withDefaultSummary,
+    ]);
+    return (react_1.default.createElement(components_1.WrapperContainer, { className: b({ 'without-default-summary': !withDefaultSummary }) },
+        react_1.default.createElement(uikit_1.Disclosure, Object.assign({ summary: summary, defaultExpanded: true }, restWrapperProps),
+            react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 0.5, grow: 1 },
+                react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
+                react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) })))));
+};
+exports.Accordeon = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/wrappers/Accordeon/index.d.ts

@@ -0,0 +1 @@
+export { Accordeon, type AccordeonProps } from './Accordeon';

package/build/cjs/lib/unstable/kit/wrappers/Accordeon/index.js

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

package/build/cjs/lib/unstable/kit/wrappers/Row/Row.css

@@ -8,7 +8,7 @@
   display: inline;
   width: 180px;
   min-height: 28px;
-  padding-top: 5.5px;
+  padding-top: 4.5px;
 }
 .sr-row__title {
   min-height: 18px;
@@ -19,9 +19,6 @@
   margin-left: calc(var(--g-spacing-base) * 1);
   color: var(--g-color-text-danger);
 }
-.sr-row__right {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  gap: calc(var(--g-spacing-base) * 0.5);
+.sr-row__help-mark {
+  margin-top: 1.5px;
 }

package/build/cjs/lib/unstable/kit/wrappers/Row/Row.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { JsonSchema } from '../../../core';
+export interface RowProps {
+    descriptionType?: 'tooltip' | 'bottom';
+}
+export declare const Row: React.NamedExoticComponent<import("../../../core").WrapperProps<JsonSchema, RowProps>>;

package/build/cjs/lib/unstable/kit/wrappers/Row/Row.js

@@ -7,12 +7,12 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('row');
-const Component = ({ children, input, schema, wrapperProps }) => {
+const Component = ({ children, input, meta, schema, wrapperProps, }) => {
     const tooltip = react_1.default.useMemo(() => {
         if (!schema.description || wrapperProps.descriptionType === 'bottom') {
             return null;
         }
-        return (react_1.default.createElement(uikit_1.HelpMark, null,
+        return (react_1.default.createElement(uikit_1.HelpMark, { className: b('help-mark') },
             react_1.default.createElement(components_1.HTMLContent, { html: schema.description })));
     }, [schema.description, wrapperProps.descriptionType]);
     const bottomDescription = react_1.default.useMemo(() => {
@@ -21,14 +21,15 @@ const Component = ({ children, input, schema, wrapperProps }) => {
         }
         return react_1.default.createElement(components_1.HTMLContent, { html: schema.description, color: "secondary" });
     }, [schema.description, wrapperProps.descriptionType]);
-    return (react_1.default.createElement(uikit_1.Flex, { className: b(), alignItems: "flex-start", gap: 2 },
+    return (react_1.default.createElement(components_1.WrapperContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2 },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement(uikit_1.Text, { className: b('title', { required: wrapperProps.required }), wordBreak: "break-word" }, schema.title),
             tooltip),
-        react_1.default.createElement("div", { className: b('right') },
-            react_1.default.createElement(uikit_1.Flex, { gap: 2 },
+        react_1.default.createElement(uikit_1.Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
+            react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },
                 children,
                 react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name })),
-            bottomDescription)));
+            bottomDescription,
+            react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))));
 };
 exports.Row = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/wrappers/Row/index.d.ts

@@ -0,0 +1 @@
+export { Row, type RowProps } from './Row';

package/build/cjs/lib/unstable/kit/wrappers/Section/Section.css

@@ -0,0 +1,23 @@
+.sr-section {
+  margin-bottom: calc(var(--g-spacing-base) * 4);
+}
+.sr-section:last-child {
+  margin-bottom: 0;
+}
+.sr-section__header {
+  min-height: 28px;
+}
+.sr-section__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-section__content_with-indent:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: calc(100% + var(--g-spacing-base) * 2);
+  background-color: var(--g-color-line-generic);
+  position: absolute;
+  left: calc(var(--g-spacing-base) * 3 + 1.5px);
+  bottom: 0;
+}

package/build/cjs/lib/unstable/kit/wrappers/Section/Section.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
+import type { JsonSchema } from '../../../core';
+export interface SectionProps extends TextProps {
+    descriptionType?: 'tooltip' | 'bottom';
+    withIndent?: boolean;
+}
+export declare const Section: React.NamedExoticComponent<import("../../../core").WrapperProps<JsonSchema, SectionProps>>;

package/build/cjs/lib/unstable/kit/wrappers/Section/Section.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('section');
+const Component = ({ children, input, meta, schema, wrapperProps, }) => {
+    const { descriptionType = 'tooltip', withIndent = false } = wrapperProps, restWrapperProps = tslib_1.__rest(wrapperProps, ["descriptionType", "withIndent"]);
+    const tooltip = react_1.default.useMemo(() => {
+        if (!schema.description || descriptionType === 'bottom') {
+            return null;
+        }
+        return (react_1.default.createElement(uikit_1.HelpMark, null,
+            react_1.default.createElement(components_1.HTMLContent, { html: schema.description })));
+    }, [schema.description, descriptionType]);
+    const bottomDescription = react_1.default.useMemo(() => {
+        if (!schema.description || descriptionType !== 'bottom') {
+            return null;
+        }
+        return react_1.default.createElement(components_1.HTMLContent, { html: schema.description, color: "secondary" });
+    }, [schema.description, descriptionType]);
+    return (react_1.default.createElement(components_1.WrapperContainer, { className: b(), gap: 0.5 },
+        react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 4 },
+            react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 2 },
+                react_1.default.createElement(uikit_1.Flex, { className: b('header'), gap: 2, alignItems: "center" },
+                    react_1.default.createElement(uikit_1.Text, Object.assign({ variant: "subheader-1" }, restWrapperProps), schema.title),
+                    tooltip,
+                    react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name })),
+                bottomDescription),
+            react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children)),
+        react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) })));
+};
+exports.Section = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/wrappers/Section/index.d.ts

@@ -0,0 +1 @@
+export { Section, type SectionProps } from './Section';

package/build/cjs/lib/unstable/kit/wrappers/Section/index.js

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

package/build/cjs/lib/unstable/kit/wrappers/Transparent/Transparent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { JsonSchema } from '../../../core';
+export declare const Transparent: React.NamedExoticComponent<import("../../../core").WrapperProps<JsonSchema, {}>>;

package/build/cjs/lib/unstable/kit/wrappers/Transparent/Transparent.js

@@ -7,9 +7,11 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('transparent');
-const Component = ({ children, input }) => {
-    return (react_1.default.createElement(uikit_1.Flex, { className: b(), gap: 2 },
-        children,
-        react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name })));
+const Component = ({ children, input, meta }) => {
+    return (react_1.default.createElement(components_1.WrapperContainer, { className: b(), gap: 0.5 },
+        react_1.default.createElement(uikit_1.Flex, { grow: 1, gap: 2 },
+            children,
+            react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name })),
+        react_1.default.createElement(components_1.ControlError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) })));
 };
 exports.Transparent = react_1.default.memo(Component);

package/build/cjs/lib/unstable/kit/wrappers/Transparent/index.d.ts

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

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

@@ -0,0 +1,4 @@
+export { Accordeon, type AccordeonProps } from './Accordeon';
+export { Row, type RowProps } from './Row';
+export { Section, type SectionProps } from './Section';
+export { Transparent } from './Transparent';

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

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Transparent = exports.Row = void 0;
+exports.Transparent = exports.Section = exports.Row = exports.Accordeon = void 0;
+var Accordeon_1 = require("./Accordeon");
+Object.defineProperty(exports, "Accordeon", { enumerable: true, get: function () { return Accordeon_1.Accordeon; } });
 var Row_1 = require("./Row");
 Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Row_1.Row; } });
+var Section_1 = require("./Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
 var Transparent_1 = require("./Transparent");
 Object.defineProperty(exports, "Transparent", { enumerable: true, get: function () { return Transparent_1.Transparent; } });

package/build/cjs/unstable.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/unstable/core';
+export { config, untypedConfig } from './lib/unstable/kit/constants';
+export * from './lib/unstable/kit/controls';
+export * from './lib/unstable/kit/wrappers';

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

@@ -1,2 +1,3 @@
 export { Entity, type EntityProps } from './Entity';
 export type { EntityState } from './types';
+export { getRenderKit } from './utils';

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

@@ -1 +1,2 @@
 export { Entity } from './Entity';
+export { getRenderKit } from './utils';

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';