@gravity-ui/dynamic-forms 3.4.1 → 3.6.0

package/build/cjs/lib/core/components/Form/Controller/utils.js

@@ -60,14 +60,15 @@ const getRender = ({ name, spec, inputEntity, Layout, }) => {
     const render = (props) => {
         if (inputEntity && (0, helpers_1.isCorrectSpec)(spec) && lodash_1.default.isString(name)) {
             if (!spec.viewSpec.hidden) {
+                const { layoutProps, inputProps } = spec.viewSpec;
                 if (inputEntity.independent) {
                     const InputComponent = inputEntity.Component;
-                    return react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout }, props));
+                    return (react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name, Layout: Layout, inputProps: inputProps, layoutProps: layoutProps }, props)));
                 }
                 const InputComponent = inputEntity.Component;
-                const input = react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name }, props));
+                const input = (react_1.default.createElement(InputComponent, Object.assign({ spec: spec, name: name, inputProps: inputProps }, props)));
                 if (Layout) {
-                    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, props), input));
+                    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name, layoutProps: layoutProps }, props), input));
                 }
                 return input;
             }
@@ -288,11 +289,9 @@ const updateStore = ({ store, setStore, spec: _spec, name, parentOnChange, paren
             parentOnChange,
             parentOnUnmount,
         })), { state: store.state });
-        if (updateState) {
-            nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
-                ? { errorMutator: errorMutator.value }
-                : {})));
-        }
+        nextStore = methodOnChange(nextStore, Object.assign({ valOrSetter: (value) => valueMutatorUpdated ? valueMutator.value : value }, (errorMutatorUpdated
+            ? { errorMutator: errorMutator.value }
+            : {})));
         setStore(nextStore);
     }
     else if (updateNonCritical) {

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.css

@@ -3,12 +3,24 @@
   flex-direction: column;
   justify-content: space-between;
   box-sizing: border-box;
-  max-width: 750px;
   box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
   border-radius: 5px;
   color: var(--g-color-text-primary);
   background-color: var(--g-color-base-float);
 }
+.df-accordeon-card .df-row {
+  width: 100%;
+  max-width: unset;
+}
+.df-accordeon-card .df-row .df-select,
+.df-accordeon-card .df-row .df-multi-select,
+.df-accordeon-card .df-row .df-transparent_array-item {
+  max-width: unset;
+}
+.df-accordeon-card .df-monaco-input,
+.df-accordeon-card .df-monaco-base-view {
+  width: 100%;
+}
 .df-accordeon-card:hover {
   box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
@@ -47,15 +59,6 @@
   justify-content: center;
   order: -1;
 }
-.df-accordeon-card__header-content-title {
-  font-weight: 700;
-}
-.df-accordeon-card__header-content-title_size_s {
-  font-size: 13px;
-}
-.df-accordeon-card__header-content-title_size_m {
-  font-size: 16px;
-}
 .df-accordeon-card__header-content-description {
   margin-top: 12px;
   color: var(--g-color-text-complementary);
@@ -73,7 +76,6 @@
 }
 .df-accordeon-card__body {
   display: none;
-  margin-top: -10px 0 8px;
   padding: 16px;
 }
 .df-accordeon-card__body_open {

package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.js

@@ -8,7 +8,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('accordeon-card');
-const AccordeonCard = ({ className, name, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, }) => {
+const AccordeonCard = ({ className, name, header, description, open: propsOpen, onToggle, headerActionsTemplate, ignoreHeaderToggle, titleSize = 'm', alwaysOpen, children, classNameBody, }) => {
     const accordeonRef = react_1.default.useRef(null);
     const bodyRef = react_1.default.useRef(null);
     const [open, setOpen] = react_1.default.useState(alwaysOpen || propsOpen || false);
@@ -31,20 +31,27 @@ const AccordeonCard = ({ className, name, header, description, open: propsOpen,
             accordeonRef.current.classList.add('df-accordeon-card_empty');
         }
     });
+    const currentHeaderVariant = react_1.default.useMemo(() => {
+        if (!lodash_1.default.isString(header)) {
+            return 'body-1';
+        }
+        if (titleSize === 'm') {
+            return 'subheader-2';
+        }
+        return 'subheader-1';
+    }, [titleSize]);
     return (react_1.default.createElement("div", { ref: accordeonRef, className: b({ empty: Boolean(emptyBody) }, className) },
         react_1.default.createElement("div", { className: b('header', {
                 open: open && !emptyBody,
                 'without-action': ignoreHeaderToggle || alwaysOpen,
             }), onClick: !ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined },
             react_1.default.createElement("div", { className: b('header-content') },
-                react_1.default.createElement("span", { className: lodash_1.default.isString(header)
-                        ? b('header-content-title', { size: titleSize })
-                        : undefined }, header),
+                react_1.default.createElement(uikit_1.Text, { variant: currentHeaderVariant }, header),
                 description ? (react_1.default.createElement("span", { className: b('header-content-description'), dangerouslySetInnerHTML: { __html: description } })) : null),
             !emptyBody && !alwaysOpen ? (react_1.default.createElement("div", { className: b('header-toggle-btn'), onClick: preventEvent },
                 headerActionsTemplate ? (react_1.default.createElement("div", { className: b('interal-actions') }, headerActionsTemplate)) : null,
                 react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleToggle, qa: `${name}-accordeon-toggler` },
                     react_1.default.createElement(uikit_1.Icon, { className: b('toggle-icon', { open }), data: icons_1.ChevronDown, size: 16 })))) : null),
-        react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }) }, children)));
+        react_1.default.createElement("div", { ref: bodyRef, className: b('body', { open: open && !emptyBody }, classNameBody) }, children)));
 };
 exports.AccordeonCard = AccordeonCard;

package/build/cjs/lib/kit/components/Card/Card.css

@@ -48,12 +48,6 @@
   margin-left: 10px;
 }
 .df-card__title {
-  font-size: var(--g-text-subheader-2-font-size);
-  font-weight: var(--g-text-subheader-font-weight);
-  line-height: var(--g-text-subheader-2-line-height);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   max-width: 533px;
 }
 .df-card__note {

package/build/cjs/lib/kit/components/Card/Card.js

@@ -38,7 +38,7 @@ const Card = ({ name, title: propsTitle, description, actions, open: propsOpen,
         if (lodash_1.default.isString(propsTitle)) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(uikit_1.Popover, { content: propsTitle, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
-                    react_1.default.createElement("div", { ref: titleRef, className: b('title') }, propsTitle)),
+                    react_1.default.createElement(uikit_1.Text, { className: b('title'), ellipsis: true, ref: titleRef, variant: "subheader-2" }, propsTitle)),
                 description ? (react_1.default.createElement("div", { className: b('note') },
                     react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: common_1.COMMON_POPOVER_PLACEMENT }))) : null));
         }

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

@@ -8,7 +8,7 @@ const __1 = require("../../");
 const core_1 = require("../../../../core");
 const hooks_1 = require("../../../hooks");
 const Layouts_1 = require("../../Layouts");
-const RemoveButton_1 = require("../../Layouts/Accordeon/RemoveButton");
+const RemoveButton_1 = require("../../RemoveButton");
 const CardOneOf = (props) => {
     var _a;
     const { input, meta, spec, name } = props;

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

@@ -8,8 +8,4 @@
   display: block;
   margin: auto 10px;
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  color: var(--g-color-text-secondary);
 }

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

@@ -43,7 +43,7 @@ const FileInput = ({ name, input, spec }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick, qa: `${name}-file-upload` }, (0, i18n_1.default)('button-upload_file')),
         react_1.default.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
-        react_1.default.createElement("span", { className: b('file-name') }, fileNameContent),
+        react_1.default.createElement(uikit_1.Text, { className: b('file-name'), ellipsis: true, color: "secondary" }, fileNameContent),
         value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled, qa: `${name}-file-remove` },
             react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null));
 };

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -5,9 +5,4 @@
   padding: 15px;
   align-items: center;
   background-color: var(--g-color-base-float-hover);
-}
-.df-monaco-header__language {
-  margin-top: 2px;
-  margin-left: 10px;
-  font-size: 16px;
 }

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js

@@ -10,5 +10,5 @@ const b = (0, utils_1.block)('monaco-header');
 const MonacoHeader = ({ language, editButton }) => (react_1.default.createElement("div", { className: b() },
     react_1.default.createElement("div", null,
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.File, size: 18 }),
-        react_1.default.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+        react_1.default.createElement(uikit_1.Text, { variant: "body-3" }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
 exports.MonacoHeader = MonacoHeader;

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

@@ -7,25 +7,34 @@ const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('multi-select');
-const MultiSelect = ({ name, input, spec }) => {
+const MultiSelect = ({ name, input, spec, inputProps }) => {
     var _a, _b, _c, _d;
     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 { withCustomOptions, options: externalOptions } = inputProps || {};
     const options = react_1.default.useMemo(() => {
         var _a;
-        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a, _b, _c, _d, _e;
-            return ({
-                id,
-                value: id,
-                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
-                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
-                    react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
-                    react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
-                key: id,
+        return withCustomOptions
+            ? externalOptions || []
+            : (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c, _d, _e;
+                return ({
+                    id,
+                    value: id,
+                    text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
+                        react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
+                    key: id,
+                });
             });
-        });
-    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    }, [
+        spec.enum,
+        spec.description,
+        (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta,
+        externalOptions,
+        withCustomOptions,
+    ]);
     const renderOption = react_1.default.useCallback((option) => {
         return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
     }, []);
@@ -46,6 +55,6 @@ const MultiSelect = ({ name, input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
     const handleChange = react_1.default.useCallback((value) => onChange((0, core_1.transformArrIn)(value)), [onChange]);
-    return (react_1.default.createElement(uikit_1.Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, multiple: true, qa: name }));
+    return (react_1.default.createElement(uikit_1.Select, Object.assign({ width: "max", className: b(), filterable: filterable, renderOption: renderOption, getOptionHeight: getOptionHeight }, inputProps, { value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, multiple: true, qa: name })));
 };
 exports.MultiSelect = MultiSelect;

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

@@ -6,25 +6,34 @@ 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 = ({ name, input, spec }) => {
+const Select = ({ name, input, spec, inputProps }) => {
     var _a, _b, _c, _d;
     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 { withCustomOptions, options: externalOptions } = inputProps || {};
     const options = react_1.default.useMemo(() => {
         var _a;
-        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
-            var _a, _b, _c, _d, _e;
-            return ({
-                id,
-                value: id,
-                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
-                content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
-                    react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
-                    react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
-                key: id,
+        return withCustomOptions
+            ? externalOptions || []
+            : (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+                var _a, _b, _c, _d, _e;
+                return ({
+                    id,
+                    value: id,
+                    text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                    content: ((_c = (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c[id]) ? (react_1.default.createElement("div", { key: id },
+                        react_1.default.createElement(uikit_1.Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        react_1.default.createElement(uikit_1.Text, { color: "secondary", className: b('meta-text') }, spec.viewSpec.selectParams.meta[id]))) : (((_e = spec.description) === null || _e === void 0 ? void 0 : _e[id]) || id),
+                    key: id,
+                });
             });
-        });
-    }, [spec.enum, spec.description, (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta]);
+    }, [
+        spec.enum,
+        spec.description,
+        (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.meta,
+        externalOptions,
+        withCustomOptions,
+    ]);
     const renderOption = react_1.default.useCallback((option) => {
         return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
     }, []);
@@ -44,6 +53,6 @@ const Select = ({ name, input, spec }) => {
             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, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, getOptionHeight: getOptionHeight, renderOption: renderOption, qa: name }));
+    return (react_1.default.createElement(uikit_1.Select, Object.assign({ className: b(), width: "max", filterable: filterable, getOptionHeight: getOptionHeight, renderOption: renderOption }, inputProps, { value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterPlaceholder: (_d = spec.viewSpec.selectParams) === null || _d === void 0 ? void 0 : _d.filterPlaceholder, qa: name })));
 };
 exports.Select = Select;

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

@@ -6,17 +6,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("@gravity-ui/components");
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
-    const props = {
-        value: lodash_1.default.isNil(value) ? '' : `${value}`,
-        hasClear: true,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        onUpdate: onChange,
-        disabled: spec.viewSpec.disabled,
-        placeholder: spec.viewSpec.placeholder,
-        qa: name,
-    };
+const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, inputProps, }) => {
+    const props = Object.assign(Object.assign({ hasClear: true }, inputProps), { value: lodash_1.default.isNil(value) ? '' : `${value}`, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name });
     if (spec.viewSpec.type === 'password') {
         return (react_1.default.createElement(components_1.PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
     }

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

@@ -4,8 +4,8 @@ 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 = ({ name, input, spec }) => {
+const TextArea = ({ name, input, spec, inputProps }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (react_1.default.createElement(uikit_1.TextArea, { value: value || '', onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name }));
+    return (react_1.default.createElement(uikit_1.TextArea, Object.assign({ maxRows: 20, minRows: 8, hasClear: true }, inputProps, { value: value || '', onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, qa: name })));
 };
 exports.TextArea = TextArea;

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

@@ -27,7 +27,7 @@ const TextContent = (_a) => {
             iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
             content,
             input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: b('separator') }, ":"),
+                react_1.default.createElement(uikit_1.Text, { className: b('separator') }, ":"),
                 react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
     }
     if (Layout) {

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

@@ -5,8 +5,8 @@ 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("../../RemoveButton");
 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));

package/build/cjs/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.css

@@ -0,0 +1,3 @@
+.df-accordeon-card-form__accordeon-card-body {
+  padding-right: 32px;
+}

package/build/cjs/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordeonCardForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const AccordeonCard_1 = require("../../AccordeonCard");
+const ErrorWrapper_1 = require("../../ErrorWrapper");
+const RemoveButton_1 = require("../../RemoveButton");
+const b = (0, utils_1.block)('accordeon-card-form');
+const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
+    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, { name: name, onDrop: onDrop });
+    }, [spec.required, input.value, onDrop, name]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(AccordeonCard_1.AccordeonCard, { classNameBody: b('accordeon-card-body'), name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: setOpen, headerActionsTemplate: removeButton },
+        react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};
+exports.AccordeonCardForm = AccordeonCardForm;

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

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

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

@@ -5,7 +5,7 @@ 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 RemoveButton_1 = require("../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));

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

@@ -4,7 +4,7 @@ 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 RemoveButton_1 = require("../RemoveButton");
 const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = react_1.default.useMemo(() => {
         if (spec.required || !input.value) {

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

@@ -16,9 +16,9 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('left-inner') },
-                react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                react_1.default.createElement(uikit_1.Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
-                    react_1.default.createElement("span", { className: b('note-inner') },
+                    react_1.default.createElement(uikit_1.Text, { className: b('note-inner') },
                         react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },

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

@@ -31,7 +31,7 @@ const SectionBase = (_a) => {
                 } }));
         }
         else {
-            description = (react_1.default.createElement("div", { className: b('note') },
+            description = (react_1.default.createElement(uikit_1.Text, { className: b('note') },
                 react_1.default.createElement(components_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Accordeon"), exports);
+tslib_1.__exportStar(require("./AccordeonCard"), exports);
 tslib_1.__exportStar(require("./CardAccordeon"), exports);
 tslib_1.__exportStar(require("./CardSection"), exports);
 tslib_1.__exportStar(require("./Row"), exports);

package/build/cjs/lib/kit/components/LongValue/LongValue.css

@@ -1,11 +1,5 @@
 .df-long-value {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-long-value_open {
-  white-space: pre-wrap;
-  word-wrap: break-word;
 }
 .df-long-value_long {
   cursor: pointer;

package/build/cjs/lib/kit/components/LongValue/LongValue.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongValue = 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)('long-value');
 const LongValue = ({ value, className }) => {
@@ -11,6 +12,15 @@ const LongValue = ({ value, className }) => {
     const [open, setOpen] = react_1.default.useState(false);
     const [long, setLong] = react_1.default.useState(false);
     const handleClick = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const currentTextProperies = react_1.default.useMemo(() => {
+        let wordBreak;
+        let whiteSpace;
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+        return { wordBreak, whiteSpace };
+    }, [open]);
     react_1.default.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -32,6 +42,7 @@ const LongValue = ({ value, className }) => {
             }
         }
     });
-    return (react_1.default.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+    return (react_1.default.createElement("div", { ref: ref, onClick: long ? handleClick : undefined },
+        react_1.default.createElement(uikit_1.Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
 };
 exports.LongValue = LongValue;

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

@@ -5,7 +5,7 @@ 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 i18n_1 = tslib_1.__importDefault(require("../../i18n"));
 const RemoveButton = ({ name, 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", qa: `${name}-drop-item` },

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

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

package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -17,21 +17,6 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__title {
-  font-weight: 500;
-}
-.df-simple-vertical-accordeon__title_size_s {
-  margin-bottom: 0;
-  font-size: var(--g-text-body-1-font-size);
-}
-.df-simple-vertical-accordeon__title_size_m {
-  margin-bottom: 1px;
-  font-size: var(--g-text-body2-font-size);
-}
-.df-simple-vertical-accordeon__title_size_l {
-  margin-bottom: 2px;
-  font-size: var(--g-text-body3-font-size);
-}
 .df-simple-vertical-accordeon__tooltip {
   margin: 0px 5px;
 }

package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.js

@@ -52,7 +52,7 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
     }
     render() {
         var _a;
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (react_1.default.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -60,11 +60,12 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
+        const currentTitleVariant = this.getCurrentTitleVariant();
         return (Boolean(react_1.default.Children.count(children)) && (react_1.default.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             react_1.default.createElement("div", { className: b('header') },
                 react_1.default.createElement(uikit_1.Popover, { content: title, disabled: titlePopoverDisabled, placement: common_1.COMMON_POPOVER_PLACEMENT },
                     react_1.default.createElement(uikit_1.Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
-                        react_1.default.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        react_1.default.createElement(uikit_1.Text, { variant: currentTitleVariant }, title),
                         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
@@ -77,9 +78,19 @@ class SimpleVerticalAccordeon extends react_1.default.Component {
         }
         return this.state.open ? openTitle : title;
     }
+    getCurrentTitleVariant() {
+        const { titleSize } = this.props;
+        if (titleSize === 'm') {
+            return 'body-2';
+        }
+        if (titleSize === 'l') {
+            return 'body-3';
+        }
+        return 'body-1';
+    }
     getTooltip() {
         const { note } = this.props;
-        return note ? (react_1.default.createElement("span", { className: b('tooltip') },
+        return note ? (react_1.default.createElement(uikit_1.Text, { className: b('tooltip') },
             react_1.default.createElement(components_1.HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }

package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewAccordeonCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const AccordeonCard_1 = require("../../AccordeonCard");
+const ViewAccordeonCard = ({ value, name, spec, children, }) => {
+    const [open, setOpen] = react_1.default.useState(lodash_1.default.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
+    if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
+        return null;
+    }
+    return (react_1.default.createElement(AccordeonCard_1.AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: setOpen }, children));
+};
+exports.ViewAccordeonCard = ViewAccordeonCard;

package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js

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