@gravity-ui/dynamic-forms 3.4.1 → 3.6.0

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

@@ -4,25 +4,34 @@ import { transformArrIn, transformArrOut } from '../../../../core';
 import { block } from '../../../utils';
 import './MultiSelect.css';
 const b = block('multi-select');
-export const MultiSelect = ({ name, input, spec }) => {
+export const MultiSelect = ({ name, input, spec, inputProps }) => {
     var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.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.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.createElement("div", { key: id },
-                    React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
-                    React.createElement(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.createElement("div", { key: id },
+                        React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        React.createElement(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.useCallback((option) => {
         return React.createElement(React.Fragment, { key: option.value }, option.content || option.value);
     }, []);
@@ -43,5 +52,5 @@ export const MultiSelect = ({ name, input, spec }) => {
     }, [onFocus, onBlur]);
     const _value = React.useMemo(() => transformArrOut(value), [value]);
     const handleChange = React.useCallback((value) => onChange(transformArrIn(value)), [onChange]);
-    return (React.createElement(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.createElement(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 })));
 };

package/build/esm/lib/kit/components/Inputs/Select/Select.d.ts

@@ -1,3 +1,7 @@
+import { SelectProps as SelectBaseProps } from '@gravity-ui/uikit';
 import { StringInput } from '../../../../core';
 import './Select.css';
-export declare const Select: StringInput;
+export interface SelectProps extends Omit<SelectBaseProps, 'onUpdate' | 'value' | 'onOpenChange' | 'disabled' | 'placeholder' | 'filterPlaceholder' | 'multiple' | 'qa'> {
+    withCustomOptions?: boolean;
+}
+export declare const Select: StringInput<SelectProps>;

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

@@ -3,25 +3,34 @@ import { Select as SelectBase, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './Select.css';
 const b = block('select');
-export const Select = ({ name, input, spec }) => {
+export const Select = ({ name, input, spec, inputProps }) => {
     var _a, _b, _c, _d;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.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.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.createElement("div", { key: id },
-                    React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
-                    React.createElement(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.createElement("div", { key: id },
+                        React.createElement(Text, null, ((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        React.createElement(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.useCallback((option) => {
         return React.createElement(React.Fragment, { key: option.value }, option.content || option.value);
     }, []);
@@ -41,5 +50,5 @@ export const Select = ({ name, input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (React.createElement(SelectBase, { 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.createElement(SelectBase, 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 })));
 };

package/build/esm/lib/kit/components/Inputs/Text/Text.d.ts

@@ -1,2 +1,5 @@
+import { TextInputProps as TextInputBaseProps } from '@gravity-ui/uikit';
 import { NumberInputProps, StringInputProps } from '../../../../core';
-export declare const Text: <T extends NumberInputProps | StringInputProps>({ name, input: { value, onBlur, onChange, onFocus }, spec, }: T) => JSX.Element;
+export interface TextProps extends Omit<TextInputBaseProps, 'value' | 'onBlur' | 'onFocus' | 'onUpdate' | 'disabled' | 'placeholder' | 'qa'> {
+}
+export declare const Text: <T extends NumberInputProps<TextProps> | StringInputProps<TextProps>>({ name, input: { value, onBlur, onChange, onFocus }, spec, inputProps, }: T) => JSX.Element;

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

@@ -2,17 +2,8 @@ import React from 'react';
 import { PasswordInput } from '@gravity-ui/components';
 import { TextInput } from '@gravity-ui/uikit';
 import _ from 'lodash';
-export const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
-    const props = {
-        value: _.isNil(value) ? '' : `${value}`,
-        hasClear: true,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        onUpdate: onChange,
-        disabled: spec.viewSpec.disabled,
-        placeholder: spec.viewSpec.placeholder,
-        qa: name,
-    };
+export const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, inputProps, }) => {
+    const props = Object.assign(Object.assign({ hasClear: true }, inputProps), { value: _.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.createElement(PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
     }

package/build/esm/lib/kit/components/Inputs/TextArea/TextArea.d.ts

@@ -1,2 +1,5 @@
+import { TextAreaProps as TextAreaBaseProps } from '@gravity-ui/uikit';
 import { StringInput } from '../../../../core';
-export declare const TextArea: StringInput;
+export interface TextAreaProps extends Omit<TextAreaBaseProps, 'value' | 'onBlur' | 'onFocus' | 'onUpdate' | 'disabled' | 'placeholder' | 'qa'> {
+}
+export declare const TextArea: StringInput<TextAreaProps>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextArea as TextAreaBase } from '@gravity-ui/uikit';
-export const TextArea = ({ name, input, spec }) => {
+export const TextArea = ({ name, input, spec, inputProps }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (React.createElement(TextAreaBase, { 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.createElement(TextAreaBase, 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 })));
 };

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

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

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.d.ts

@@ -1,2 +1,2 @@
 import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
-export declare const Accordeon: <T extends ArrayLayoutProps | ObjectLayoutProps>({ name, spec, input, meta, children, }: T) => JSX.Element;
+export declare const Accordeon: <T extends ArrayLayoutProps<{}> | ObjectLayoutProps<{}>>({ name, spec, input, meta, children, }: T) => JSX.Element;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ErrorWrapper } from '../../../components';
 import { useErrorChecker } from '../../../hooks';
+import { RemoveButton } from '../../RemoveButton';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
-import { RemoveButton } from './RemoveButton';
 export const Accordeon = ({ name, spec, input, meta, children, }) => {
     var _a;
     const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));

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

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

package/build/esm/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.d.ts

@@ -0,0 +1,3 @@
+import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
+import './AccordeonCardForm.css';
+export declare const AccordeonCardForm: <T extends ArrayLayoutProps<{}> | ObjectLayoutProps<{}>>({ name, spec, input, children, meta, }: T) => JSX.Element;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useErrorChecker } from '../../../hooks';
+import { block } from '../../../utils';
+import { AccordeonCard } from '../../AccordeonCard';
+import { ErrorWrapper } from '../../ErrorWrapper';
+import { RemoveButton } from '../../RemoveButton';
+import './AccordeonCardForm.css';
+const b = block('accordeon-card-form');
+export const AccordeonCardForm = ({ name, spec, input, children, meta, }) => {
+    var _a;
+    const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
+    const onDrop = React.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+        return React.createElement(RemoveButton, { name: name, onDrop: onDrop });
+    }, [spec.required, input.value, onDrop, name]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(AccordeonCard, { classNameBody: b('accordeon-card-body'), name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: setOpen, headerActionsTemplate: removeButton },
+        React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
+};

package/build/esm/lib/kit/components/Layouts/AccordeonCard/index.d.ts

@@ -0,0 +1 @@
+export * from './AccordeonCardForm';

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

@@ -0,0 +1 @@
+export * from './AccordeonCardForm';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, ErrorWrapper } from '../../components';
 import { useErrorChecker } from '../../hooks';
-import { RemoveButton } from './Accordeon/RemoveButton';
+import { RemoveButton } from '../RemoveButton';
 export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
     var _a;
     const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Card, ErrorWrapper } from '../../components';
-import { RemoveButton } from './Accordeon/RemoveButton';
+import { RemoveButton } from '../RemoveButton';
 export const CardSection = ({ name, spec, input, meta, children, }) => {
     const removeButton = React.useMemo(() => {
         if (spec.required || !input.value) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { TrashBin } from '@gravity-ui/icons';
-import { Button, Icon } from '@gravity-ui/uikit';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
 import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
 import { block } from '../../../utils';
@@ -13,9 +13,9 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement("div", { className: b('left-inner') },
-                React.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                React.createElement(Text, { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
                 !verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("span", { className: b('note') },
-                    React.createElement("span", { className: b('note-inner') },
+                    React.createElement(Text, { className: b('note-inner') },
                         React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { GroupIndent } from '../../';
 import { COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper } from '../../../';
 import { isArraySpec, isObjectSpec, } from '../../../../core';
@@ -29,7 +29,7 @@ const SectionBase = (_a) => {
                 } }));
         }
         else {
-            description = (React.createElement("div", { className: b('note') },
+            description = (React.createElement(Text, { className: b('note') },
                 React.createElement(HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })));
         }
     }

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

@@ -1,4 +1,5 @@
 export * from './Accordeon';
+export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';

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

@@ -1,4 +1,5 @@
 export * from './Accordeon';
+export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';

package/build/esm/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/esm/lib/kit/components/LongValue/LongValue.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import './LongValue.css';
 const b = block('long-value');
@@ -8,6 +9,15 @@ export const LongValue = ({ value, className }) => {
     const [open, setOpen] = React.useState(false);
     const [long, setLong] = React.useState(false);
     const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const currentTextProperies = React.useMemo(() => {
+        let wordBreak;
+        let whiteSpace;
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+        return { wordBreak, whiteSpace };
+    }, [open]);
     React.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -29,5 +39,6 @@ export const LongValue = ({ value, className }) => {
             }
         }
     });
-    return (React.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+    return (React.createElement("div", { ref: ref, onClick: long ? handleClick : undefined },
+        React.createElement(Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Ellipsis } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
-import i18n from '../../../i18n';
+import i18n from '../../i18n';
 export const RemoveButton = ({ name, onDrop }) => {
     const items = React.useMemo(() => [{ text: i18n('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
     const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat", qa: `${name}-drop-item` },

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

@@ -0,0 +1 @@
+export * from './RemoveButton';

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

@@ -0,0 +1 @@
+export * from './RemoveButton';

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

@@ -37,6 +37,7 @@ export declare class SimpleVerticalAccordeon extends React.Component<SimpleVerti
     checkVisibility: () => void;
     private handleClick;
     private getTitle;
+    private getCurrentTitleVariant;
     private getTooltip;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Icon, Popover } from '@gravity-ui/uikit';
+import { Button, Icon, Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
 import './SimpleVerticalAccordeon.css';
@@ -49,7 +49,7 @@ export class SimpleVerticalAccordeon extends React.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.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -57,11 +57,12 @@ export class SimpleVerticalAccordeon extends React.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.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             React.createElement("div", { className: b('header') },
                 React.createElement(Popover, { content: title, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
                     React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
-                        React.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        React.createElement(Text, { variant: currentTitleVariant }, title),
                         React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
@@ -74,9 +75,19 @@ export class SimpleVerticalAccordeon extends React.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.createElement("span", { className: b('tooltip') },
+        return note ? (React.createElement(Text, { className: b('tooltip') },
             React.createElement(HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts

@@ -0,0 +1,2 @@
+import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
+export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, name, spec, children, }: T) => JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import _ from 'lodash';
+import { isNotEmptyValue } from '../../../utils';
+import { AccordeonCard } from '../../AccordeonCard';
+export const ViewAccordeonCard = ({ value, name, spec, children, }) => {
+    const [open, setOpen] = React.useState(_.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+    return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: setOpen }, children));
+};

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ViewAccordeonCard';

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

@@ -0,0 +1 @@
+export * from './ViewAccordeonCard';

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -14,12 +14,6 @@
   align-items: baseline;
   overflow: hidden;
 }
-.df-view-row__title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--g-color-text-secondary);
-}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
@@ -9,7 +10,7 @@ export const ViewRow = ({ value, spec, children, }) => {
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
-            React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
+            React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             React.createElement("div", { className: b('dots') })),
         React.createElement("div", { className: b('right') }, children),
         React.createElement(CopyButton, { spec: spec, value: value })));

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

@@ -1,5 +1,6 @@
 export * from './ViewAccordeon';
 export * from './ViewCardAccordeon';
+export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
 export * from './ViewSection';

package/build/esm/lib/kit/components/ViewLayouts/index.js

@@ -1,5 +1,6 @@
 export * from './ViewAccordeon';
 export * from './ViewCardAccordeon';
+export * from './ViewAccordeonCard';
 export * from './ViewCardSection';
 export * from './ViewRow';
 export * from './ViewSection';

package/build/esm/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { block, isCorrectSizeParams } from '../../../utils';
 import { useInitial } from '../../Inputs/NumberWithScale/useInitial';
 import './NumberWithScaleView.css';
@@ -9,8 +9,6 @@ const NumberWithScaleViewBase = ({ spec, value }) => {
     const { scale } = spec.viewSpec.sizeParams;
     return (React.createElement("div", { className: b() },
         React.createElement(Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: initialValue.length < 26 }, initialValue),
-        React.createElement("span", { className: b('size') },
-            " ",
-            scale[initialType].title)));
+        React.createElement(Text, { className: b('size') }, scale[initialType].title)));
 };
 export const NumberWithScaleView = (props) => isCorrectSizeParams(props.spec) && props.value ? React.createElement(NumberWithScaleViewBase, Object.assign({}, props)) : null;

package/build/esm/lib/kit/components/Views/TextAreaView/TextAreaView.css

@@ -4,14 +4,6 @@
 .df-text-area-view_active {
   cursor: pointer;
 }
-.df-text-area-view__text-view {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-text-area-view__text-view_open {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
 .df-text-area-view__chevron {
   margin: 3px;
 }

package/build/esm/lib/kit/components/Views/TextAreaView/TextAreaView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './TextAreaView.css';
 const b = block('text-area-view');
@@ -11,7 +11,7 @@ export const TextAreaView = ({ value = '' }) => {
         setIsOpen(!isOpen);
     }, [isOpen]);
     return (React.createElement("div", { className: b({ active: isValueLong }), onClick: isValueLong ? handleClick : undefined },
-        React.createElement("div", { className: b('text-view', { open: isOpen }) }, value),
+        React.createElement(Text, { ellipsis: true, whiteSpace: isOpen ? 'break-spaces' : undefined }, value),
         isValueLong ? (React.createElement("div", null,
             React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open: isOpen }), size: 16 }))) : null));
 };