@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

package/build/cjs/lib/kit/components/Inputs/Secret/Secret.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Secret = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const SECRET_PROPERTY_NAME = 'raw';
+const Secret = ({ spec, name, input }) => {
+    var _a;
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    if (!lodash_1.default.isObjectLike(spec.properties)) {
+        return null;
+    }
+    const specProperties = Object.assign({}, spec.properties);
+    if (!specProperties[SECRET_PROPERTY_NAME]) {
+        return null;
+    }
+    return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: specProperties[SECRET_PROPERTY_NAME], name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+};
+exports.Secret = Secret;

package/build/cjs/lib/kit/components/Inputs/Secret/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Secret"), exports);

package/build/cjs/lib/kit/components/Inputs/Select/Select.css

@@ -0,0 +1,3 @@
+.df-select {
+  max-width: 305px;
+}

package/build/cjs/lib/kit/components/Inputs/Select/Select.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('select');
+const Select = ({ input, spec }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const filterable = react_1.default.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                id,
+                value: id,
+                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                key: id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleChange = react_1.default.useCallback((v) => onChange(v[0]), [onChange]);
+    const handleToggle = react_1.default.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    return (react_1.default.createElement(uikit_1.Select, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable }));
+};
+exports.Select = Select;

package/build/cjs/lib/kit/components/Inputs/Select/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Select"), exports);

package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css

@@ -0,0 +1,32 @@
+.df-table-array__table {
+  margin-bottom: 10px;
+}
+.df-table-array__cell .yc-text-input,
+.df-table-array__cell .yc-select-control,
+.df-table-array__cell .yc-select,
+.df-table-array__cell .g-select {
+  max-width: 150px;
+  min-width: 150px;
+}
+.df-table-array__cell_arr, .df-table-array__cell_obj {
+  padding-left: 3px;
+}
+.df-table-array__cell_arr .yc-text-input,
+.df-table-array__cell_arr .yc-select-control:not(.df-multi-select),
+.df-table-array__cell_arr .yc-select:not(.df-multi-select),
+.df-table-array__cell_arr .g-select:not(.df-multi-select), .df-table-array__cell_obj .yc-text-input,
+.df-table-array__cell_obj .yc-select-control:not(.df-multi-select),
+.df-table-array__cell_obj .yc-select:not(.df-multi-select),
+.df-table-array__cell_obj .g-select:not(.df-multi-select) {
+  max-width: unset;
+}
+.df-table-array__cell_arr > .simple-vertical-accordeon, .df-table-array__cell_obj > .simple-vertical-accordeon {
+  margin-bottom: 0;
+}
+.df-table-array__cell_bool {
+  max-width: 50px;
+  min-width: 50px;
+}
+.df-table-array__idx {
+  padding-top: 6px;
+}

package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableArrayInput = 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 lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('table-array');
+const TableArrayInput = ({ spec, name, arrayInput, input }) => {
+    const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
+        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG &&
+        k !== core_1.OBJECT_ARRAY_CNT &&
+        arrayInput.value[k] !== core_1.REMOVED_ITEM)
+        .map((k) => k.split('<').join('').split('>').join(''))
+        .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
+    const onItemAdd = react_1.default.useCallback(() => {
+        arrayInput.onItemAdd({});
+    }, [arrayInput.onItemAdd]);
+    const onItemRemove = react_1.default.useCallback((key) => {
+        arrayInput.onItemRemove(key);
+    }, [arrayInput.onItemRemove]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const columns = react_1.default.useMemo(() => {
+        const { items, viewSpec: { table }, } = spec;
+        if (!(table === null || table === void 0 ? void 0 : table.length) || !(0, core_1.isObjectSpec)(items)) {
+            return null;
+        }
+        const idxColumn = {
+            id: 'idx',
+            name: '',
+            sticky: 'left',
+            template: (key, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
+        };
+        const removeColumn = {
+            id: 'remove',
+            name: '',
+            sticky: 'right',
+            template: (key) => (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))),
+        };
+        const columns = table.map(({ property, label }) => ({
+            id: property,
+            name: label,
+            template: (key) => {
+                var _a, _b, _c;
+                const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
+                if (!entitySpec) {
+                    return null;
+                }
+                return (react_1.default.createElement("div", { className: b('cell', {
+                        bool: (0, core_1.isBooleanSpec)(entitySpec),
+                        arr: (0, core_1.isArraySpec)(entitySpec),
+                        obj: (0, core_1.isObjectSpec)(entitySpec),
+                    }), key: `${name}.<${key}>.${property}` },
+                    react_1.default.createElement(core_1.Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: entitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange })));
+            },
+        }));
+        return [idxColumn, ...columns, removeColumn];
+    }, [name, spec, onItemRemove, parentOnChange, input.value]);
+    if (!columns) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        keys.length ? (react_1.default.createElement(uikit_1.Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top" })) : null,
+        !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            spec.viewSpec.itemLabel || null))));
+};
+exports.TableArrayInput = TableArrayInput;

package/build/cjs/lib/kit/components/Inputs/TableArrayInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TableArrayInput"), exports);

package/build/cjs/lib/kit/components/Inputs/Text/Text.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const Text = ({ input, spec }) => {
+    const { value, onBlur, onChange, onFocus } = input;
+    const handleChange = react_1.default.useCallback((value) => {
+        onChange(value);
+    }, [onChange, spec]);
+    const type = react_1.default.useMemo(() => {
+        if (spec.viewSpec.type === 'password') {
+            return 'password';
+        }
+        return 'text';
+    }, [spec.viewSpec.type]);
+    return (react_1.default.createElement(uikit_1.TextInput, { type: type, value: lodash_1.default.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined }));
+};
+exports.Text = Text;

package/build/cjs/lib/kit/components/Inputs/Text/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Text"), exports);

package/build/cjs/lib/kit/components/Inputs/TextArea/TextArea.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const TextArea = ({ input, spec }) => {
+    const { value, onBlur, onChange, onFocus } = input;
+    return (react_1.default.createElement(uikit_1.TextInput, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, multiline: true, placeholder: spec.viewSpec.placeholder }));
+};
+exports.TextArea = TextArea;

package/build/cjs/lib/kit/components/Inputs/TextArea/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TextArea"), exports);

package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.css

@@ -0,0 +1,8 @@
+.df-text-content.yc-label {
+  height: auto;
+  width: auto;
+}
+.df-text-content .yc-label__text {
+  text-align: initial;
+  white-space: initial;
+}

package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.js

@@ -0,0 +1,25 @@
+"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 uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('text-content');
+const TextContent = (_a) => {
+    var { spec, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout"]);
+    const { themeLabel, layoutDescription } = spec.viewSpec;
+    if (!layoutDescription) {
+        return null;
+    }
+    let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: layoutDescription } });
+    if (themeLabel) {
+        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: themeLabel, className: b() }, content));
+    }
+    if (Layout) {
+        const _spec = Object.assign(Object.assign({}, spec), { viewSpec: Object.assign(Object.assign({}, spec.viewSpec), { layoutDescription: undefined }) });
+        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec }, restProps), content));
+    }
+    return content;
+};
+exports.TextContent = TextContent;

package/build/cjs/lib/kit/components/Inputs/TextContent/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TextContent"), exports);

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ArrayBase"), exports);
+tslib_1.__exportStar(require("./CardOneOf"), exports);
+tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./MultiSelect"), exports);
+tslib_1.__exportStar(require("./ObjectBase"), exports);
+tslib_1.__exportStar(require("./OneOf"), exports);
+tslib_1.__exportStar(require("./OneOfCard"), exports);
+tslib_1.__exportStar(require("./Secret"), exports);
+tslib_1.__exportStar(require("./Select"), exports);
+tslib_1.__exportStar(require("./TableArrayInput"), exports);
+tslib_1.__exportStar(require("./Text"), exports);
+tslib_1.__exportStar(require("./TextArea"), exports);
+tslib_1.__exportStar(require("./TextContent"), exports);
+tslib_1.__exportStar(require("./NumberWithScale"), exports);
+tslib_1.__exportStar(require("./MonacoInput"), exports);

package/build/cjs/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -0,0 +1,27 @@
+"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 components_1 = require("../../../components");
+const hooks_1 = require("../../../hooks");
+const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
+const RemoveButton_1 = require("./RemoveButton");
+const Accordeon = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = react_1.default.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onDrop = react_1.default.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = react_1.default.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+        react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};
+exports.Accordeon = Accordeon;

package/build/cjs/lib/kit/components/Layouts/Accordeon/RemoveButton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemoveButton = 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 i18n_1 = tslib_1.__importDefault(require("../../../i18n"));
+const RemoveButton = ({ onDrop }) => {
+    const items = react_1.default.useMemo(() => [{ text: (0, i18n_1.default)('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
+    const switcher = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Button, { view: "flat" },
+        react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis, size: 16 }))), []);
+    return react_1.default.createElement(uikit_1.DropdownMenu, { switcher: switcher, items: items });
+};
+exports.RemoveButton = RemoveButton;

package/build/cjs/lib/kit/components/Layouts/Accordeon/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Accordeon"), exports);

package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css

@@ -0,0 +1,3 @@
+.df-accordeon-card-layout {
+  margin-bottom: 20px;
+}

package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordeonCardLayout = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const __1 = require("../../");
+const components_1 = require("../../../components");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const RemoveButton_1 = require("../Accordeon/RemoveButton");
+const b = (0, utils_1.block)('accordeon-card-layout');
+const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = react_1.default.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onDrop = react_1.default.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = react_1.default.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(__1.AccordeonCard, { header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
+        react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};
+exports.AccordeonCardLayout = AccordeonCardLayout;

package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordeonCardLayout"), exports);

package/build/cjs/lib/kit/components/Layouts/CardAccordeon.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardAccordeon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
+const hooks_1 = require("../../hooks");
+const RemoveButton_1 = require("./Accordeon/RemoveButton");
+const CardAccordeon = ({ name, spec, input, meta, children, }) => {
+    var _a;
+    const [open, setOpen] = react_1.default.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onDrop = react_1.default.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = react_1.default.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: onDrop });
+    }, [spec.required, input.value, onDrop]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(components_1.Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
+        react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};
+exports.CardAccordeon = CardAccordeon;

package/build/cjs/lib/kit/components/Layouts/CardSection.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../components");
+const RemoveButton_1 = require("./Accordeon/RemoveButton");
+const CardSection = ({ name, spec, input, meta, children, }) => {
+    const removeButton = react_1.default.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop });
+    }, [spec.required, input.value, input.onDrop]);
+    return (react_1.default.createElement(components_1.Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
+        react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};
+exports.CardSection = CardSection;

package/build/cjs/lib/kit/components/Layouts/Row/Row.css

@@ -0,0 +1,55 @@
+.df-row {
+  display: flex;
+  width: 500px;
+  max-width: 500px;
+  margin-bottom: 15px;
+}
+.df-row:last-child {
+  margin-bottom: 0;
+}
+.df-row_extra-width {
+  width: 533px;
+  max-width: 533px;
+}
+.df-row__left {
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.df-row__left-inner {
+  min-height: 28px;
+  display: flex;
+}
+.df-row__left::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-row__title {
+  align-self: center;
+}
+.df-row__note {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  margin-left: 5px;
+}
+.df-row__note .yc-help-popover {
+  display: flex;
+}
+.df-row__note .yc-help-popover > span {
+  display: flex;
+}
+.df-row__right {
+  display: flex;
+  flex-grow: 1;
+  margin-left: 15px;
+}
+.df-row__remove-button {
+  margin-left: 5px;
+}
+.df-row__required-mark {
+  margin-left: 2px;
+  color: var(--yc-color-text-danger);
+}

package/build/cjs/lib/kit/components/Layouts/Row/Row.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../../core");
+const components_1 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('row');
+const Row = ({ name, spec, input, meta, children, }) => {
+    const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
+    return (react_1.default.createElement("div", { className: b({ 'extra-width': (0, core_1.isArraySpec)(spec) || arrayItem }) },
+        react_1.default.createElement("div", { className: b('left') },
+            react_1.default.createElement("div", { className: b('left-inner') },
+                react_1.default.createElement("div", { className: b('title') },
+                    spec.viewSpec.layoutTitle,
+                    spec.required && react_1.default.createElement("span", { className: b('required-mark') }, "*")),
+                spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('note') },
+                    react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
+        react_1.default.createElement("div", { className: b('right') },
+            react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
+            arrayItem ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null)));
+};
+exports.Row = Row;

package/build/cjs/lib/kit/components/Layouts/Row/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Row"), exports);

package/build/cjs/lib/kit/components/Layouts/Row2/Row2.css

@@ -0,0 +1,51 @@
+.df-row2 {
+  width: 100%;
+  display: flex;
+  margin-bottom: 15px;
+}
+.df-row2:last-child {
+  margin-bottom: 0;
+}
+.df-row2__left {
+  width: 180px;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+}
+.df-row2__left::after {
+  content: "";
+  width: 100%;
+  flex-shrink: 1;
+}
+.df-row2__title {
+  padding-right: 5px;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+}
+.df-row2__right {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.df-row2__right-inner {
+  display: flex;
+}
+.df-row2__right .df-select,
+.df-row2__right .df-multi-select,
+.df-row2__right .df-transparent_array-item {
+  max-width: unset;
+}
+.df-row2__description {
+  margin-top: 10px;
+  color: var(--yc-color-text-secondary);
+}
+.df-row2__remove-button {
+  margin-left: 5px;
+}
+.df-row2__required-mark {
+  margin-left: 2px;
+  color: var(--yc-color-text-danger);
+}

package/build/cjs/lib/kit/components/Layouts/Row2/Row2.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row2 = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../../core");
+const components_1 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('row2');
+const Row2 = ({ name, spec, input, meta, children, }) => {
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('left') },
+            react_1.default.createElement("div", { className: b('title') },
+                spec.viewSpec.layoutTitle,
+                spec.required && react_1.default.createElement("span", { className: b('required-mark') }, "*"))),
+        react_1.default.createElement("div", { className: b('right') },
+            react_1.default.createElement("div", { className: b('right-inner') },
+                react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),
+                (0, core_1.isArrayItem)(name) ? (react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null),
+            spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
+};
+exports.Row2 = Row2;

package/build/cjs/lib/kit/components/Layouts/Row2/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Row2"), exports);