@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewGroup2 = exports.ViewGroup = exports.ViewSection2 = exports.ViewSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const Layouts_1 = require("../../Layouts");
+const ViewSection = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.Section, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewSection = ViewSection;
+const ViewSection2 = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.Section2, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewSection2 = ViewSection2;
+const ViewGroup = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.Group, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewGroup = ViewGroup;
+const ViewGroup2 = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.Group2, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewGroup2 = ViewGroup2;

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSectionCard2 = exports.ViewSectionCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const Layouts_1 = require("../../Layouts");
+const ViewSectionCard = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.SectionCard, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewSectionCard = ViewSectionCard;
+const ViewSectionCard2 = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.SectionCard2, Object.assign({}, props, { ignoreDescription: true })) : null;
+exports.ViewSectionCard2 = ViewSectionCard2;

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

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

package/build/cjs/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -0,0 +1,14 @@
+.df-view-table-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.df-view-table-cell > .df-view-row:last-child {
+  margin-bottom: 0;
+}
+.df-view-table-cell > .df-view-transparent {
+  margin-bottom: 6px;
+}
+.df-view-table-cell > .df-view-transparent:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewTableCell = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('view-table-cell');
+const ViewTableCell = ({ value, spec, children, }) => (react_1.default.createElement("div", { className: b() }, (0, utils_1.isNotEmptyValue)(value, spec) ? children : '—'));
+exports.ViewTableCell = ViewTableCell;

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

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

package/build/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -0,0 +1,6 @@
+.df-view-transparent {
+  margin-bottom: 20px;
+}
+.df-view-transparent:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewTransparent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('view-transparent');
+const ViewTransparent = ({ value, spec, children, }) => (0, utils_1.isNotEmptyValue)(value, spec) ? react_1.default.createElement("div", { className: b() }, children) : null;
+exports.ViewTransparent = ViewTransparent;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ViewAccordeon"), exports);
+tslib_1.__exportStar(require("./ViewAccordeonCard"), exports);
+tslib_1.__exportStar(require("./ViewCardAccordeon"), exports);
+tslib_1.__exportStar(require("./ViewCardSection"), exports);
+tslib_1.__exportStar(require("./ViewRow"), exports);
+tslib_1.__exportStar(require("./ViewRow2"), exports);
+tslib_1.__exportStar(require("./ViewSection"), exports);
+tslib_1.__exportStar(require("./ViewSectionCard"), exports);
+tslib_1.__exportStar(require("./ViewTableCell"), exports);
+tslib_1.__exportStar(require("./ViewTransparent"), exports);

package/build/cjs/lib/kit/components/Views/ArrayBaseView.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayBaseView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../core");
+const ArrayBaseView = ({ spec, name, value = [] }) => {
+    const itemSpecCorrect = react_1.default.useMemo(() => (0, core_1.isCorrectSpec)(spec.items), [spec.items]);
+    const getItemSpec = react_1.default.useCallback((idx) => {
+        if (!itemSpecCorrect) {
+            return null;
+        }
+        const itemSpec = Object.assign({}, spec.items);
+        itemSpec.viewSpec = Object.assign(Object.assign({}, itemSpec.viewSpec), { layoutTitle: itemSpec.viewSpec.layoutTitle
+                ? `${itemSpec.viewSpec.layoutTitle} ${idx + 1}`
+                : `${idx + 1}` });
+        return itemSpec;
+    }, [spec.items, itemSpecCorrect]);
+    const items = react_1.default.useMemo(() => value.map((__, idx) => {
+        const itemSpec = getItemSpec(idx);
+        if (!itemSpec) {
+            return null;
+        }
+        return (react_1.default.createElement(core_1.ViewController, { spec: itemSpec, name: `${name}[${idx}]`, key: `${name}[${idx}]` }));
+    }), [value.length, name, getItemSpec]);
+    if (!itemSpecCorrect) {
+        return null;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, items);
+};
+exports.ArrayBaseView = ArrayBaseView;

package/build/cjs/lib/kit/components/Views/BaseView/BaseView.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const components_1 = require("../../../components");
+const BaseView = ({ value, spec, linkValue, }) => {
+    var _a;
+    if (lodash_1.default.isString(value) && linkValue) {
+        return react_1.default.createElement(react_1.default.Fragment, null, linkValue);
+    }
+    return (react_1.default.createElement(components_1.LongValue, { value: ((_a = spec === null || spec === void 0 ? void 0 : spec.description) === null || _a === void 0 ? void 0 : _a[String(value)]) || String(value) }));
+};
+exports.BaseView = BaseView;

package/build/cjs/lib/kit/components/Views/BaseView/index.js

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

package/build/cjs/lib/kit/components/Views/CardOneOfView.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardOneOfView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../");
+const core_1 = require("../../../core");
+const CardOneOfView = (props) => {
+    const { value = {}, spec, name } = props;
+    const [open, setOpen] = react_1.default.useState(true);
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
+    const valueName = react_1.default.useMemo(() => {
+        var _a, _b;
+        return (((_a = spec.description) === null || _a === void 0 ? void 0 : _a[valueKey]) ||
+            ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            valueKey);
+    }, [valueKey, spec.description, specProperties]);
+    const title = react_1.default.useMemo(() => (react_1.default.createElement(__1.ViewRow, { spec: spec, value: valueName, name: name },
+        react_1.default.createElement(react_1.default.Fragment, null, valueName))), [spec, name, valueName]);
+    if (!value || !Object.keys(value).length) {
+        return null;
+    }
+    return (react_1.default.createElement(__1.Card, { title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+};
+exports.CardOneOfView = CardOneOfView;

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css

@@ -0,0 +1,7 @@
+.df-monaco-base-view {
+  border: 1px solid var(--yc-color-line-generic);
+  width: 550px;
+}
+.df-monaco-base-view_card {
+  width: auto;
+}

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonacoViewCard = exports.MonacoView = 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 hooks_1 = require("../../../../core/components/View/hooks");
+const utils_1 = require("../../../utils");
+const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
+const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
+const MonacoViewDialog_1 = require("./MonacoViewDialog");
+const b = (0, utils_1.block)('monaco-base-view');
+const MonacoBaseView = ({ value, spec, card }) => {
+    const { monacoParams, layoutTitle } = spec.viewSpec;
+    const MonacoEditor = (0, hooks_1.useMonaco)();
+    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 12 };
+    const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, true);
+    const [monacoEditorDialog, setMonacoEditorDialog] = react_1.default.useState(false);
+    const handleMonacoEditorDialogClose = react_1.default.useCallback(() => setMonacoEditorDialog(false), []);
+    if (!value || !MonacoEditor) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b({ card }) },
+        react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card, editButton: react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })) }),
+        react_1.default.createElement(MonacoEditor, { language: language, value: value, height: '250', options: options }),
+        react_1.default.createElement(MonacoViewDialog_1.MonacoViewDialog, { title: layoutTitle, fontSize: fontSize, card: card, value: value, visible: monacoEditorDialog, language: language, onClose: handleMonacoEditorDialogClose })));
+};
+const MonacoView = (props) => react_1.default.createElement(MonacoBaseView, Object.assign({}, props));
+exports.MonacoView = MonacoView;
+const MonacoViewCard = (props) => (react_1.default.createElement(MonacoBaseView, Object.assign({}, props, { card: true })));
+exports.MonacoViewCard = MonacoViewCard;

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css

@@ -0,0 +1,9 @@
+.df-monaco-view-dialog .yc-dialog-footer {
+  padding: 10px 32px 32px;
+}
+.df-monaco-view-dialog__container {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.df-monaco-view-dialog__dialog-header {
+  height: 48px;
+}

package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonacoViewDialog = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const hooks_1 = require("../../../../core/components/View/hooks");
+const i18n_1 = tslib_1.__importDefault(require("../../../i18n"));
+const utils_1 = require("../../../utils");
+const MonacoHeader_1 = require("../../Inputs/MonacoInput/MonacoHeader");
+const useMonacoOptions_1 = require("../../Inputs/MonacoInput/useMonacoOptions");
+const b = (0, utils_1.block)('monaco-view-dialog');
+const MonacoViewDialog = ({ value, title, visible, language, onClose, fontSize, card, }) => {
+    const MonacoEditor = (0, hooks_1.useMonaco)();
+    const handleClose = react_1.default.useCallback(() => {
+        onClose();
+    }, [onClose]);
+    const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, true);
+    if (!MonacoEditor) {
+        return null;
+    }
+    return (react_1.default.createElement(uikit_1.Dialog, { open: visible, onClose: handleClose, className: b() },
+        react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
+        react_1.default.createElement(uikit_1.Dialog.Body, null,
+            react_1.default.createElement("div", { className: b('container') },
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card }),
+                react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, options: options }))),
+        react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
+};
+exports.MonacoViewDialog = MonacoViewDialog;

package/build/cjs/lib/kit/components/Views/MonacoInputView/index.js

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

package/build/cjs/lib/kit/components/Views/MultiSelectView/MultiSelectView.css

@@ -0,0 +1,13 @@
+.df-multiselect-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-multiselect-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-multiselect-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}

package/build/cjs/lib/kit/components/Views/MultiSelectView/MultiSelectView.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelectView = 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)('multiselect-view');
+const MultiSelectView = ({ spec, value = [] }) => {
+    const _value = value;
+    const items = react_1.default.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, items.map((item) => (react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item)))));
+};
+exports.MultiSelectView = MultiSelectView;

package/build/cjs/lib/kit/components/Views/MultiSelectView/index.js

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

package/build/cjs/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.css

@@ -0,0 +1,15 @@
+.df-number-with-scale-view {
+  display: flex;
+}
+.df-number-with-scale-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-number-with-scale-view__tooltip-container {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.df-number-with-scale-view__size {
+  margin-left: 2px;
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberWithScaleView = 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 useInitial_1 = require("../../Inputs/NumberWithScale/useInitial");
+const b = (0, utils_1.block)('number-with-scale-view');
+const NumberWithScaleViewBase = ({ spec, value }) => {
+    const { initialValue, initialType } = (0, useInitial_1.useInitial)(value || '', spec, [value]);
+    const { scale } = spec.viewSpec.sizeParams;
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: initialValue.length < 26 }, initialValue),
+        react_1.default.createElement("span", { className: b('size') },
+            " ",
+            scale[initialType].title)));
+};
+const NumberWithScaleView = (props) => (0, utils_1.isCorrectSizeParams)(props.spec) && props.value ? react_1.default.createElement(NumberWithScaleViewBase, Object.assign({}, props)) : null;
+exports.NumberWithScaleView = NumberWithScaleView;

package/build/cjs/lib/kit/components/Views/NumberWithScaleView/index.js

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

package/build/cjs/lib/kit/components/Views/ObjectBaseView.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectBaseView = 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 ObjectBaseView = (_a) => {
+    var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
+    if (!lodash_1.default.isObjectLike(spec.properties)) {
+        return null;
+    }
+    const specProperties = Object.assign({}, spec.properties);
+    const content = (react_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => specProperties[property] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, key: `${name ? name + '.' : ''}${property}` })) : null)));
+    if (!Layout) {
+        return content;
+    }
+    return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+};
+exports.ObjectBaseView = ObjectBaseView;

package/build/cjs/lib/kit/components/Views/OneOfCardView.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfCardView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../");
+const core_1 = require("../../../core");
+const OneOfCardView = (props) => {
+    const { value = {}, spec, Layout, name } = props;
+    const [open, setOpen] = react_1.default.useState(true);
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
+    const valueName = react_1.default.useMemo(() => {
+        var _a, _b;
+        return (((_a = spec.description) === null || _a === void 0 ? void 0 : _a[valueKey]) ||
+            ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            valueKey);
+    }, [valueKey, spec.description, specProperties]);
+    const wrappedValue = react_1.default.useMemo(() => {
+        if (Layout) {
+            return (react_1.default.createElement(Layout, Object.assign({}, props, { value: valueName }),
+                react_1.default.createElement(react_1.default.Fragment, null, valueName)));
+        }
+        return valueName;
+    }, [Layout, valueName]);
+    if (!value || !Object.keys(value).length) {
+        return null;
+    }
+    return (react_1.default.createElement(__1.AccordeonCard, { className: "df-accordeon-card-layout", header: wrappedValue, open: open, onToggle: onToggle, ignoreHeaderToggle: true }, specProperties[valueKey] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+};
+exports.OneOfCardView = OneOfCardView;

package/build/cjs/lib/kit/components/Views/OneOfView.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../");
+const core_1 = require("../../../core");
+const OneOfView = (props) => {
+    const { value = {}, spec, Layout, name } = props;
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
+    const valueName = react_1.default.useMemo(() => {
+        var _a, _b;
+        return (((_a = spec.description) === null || _a === void 0 ? void 0 : _a[valueKey]) ||
+            ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            valueKey);
+    }, [valueKey, spec.description, specProperties]);
+    const wrappedValue = react_1.default.useMemo(() => {
+        if (Layout) {
+            return (react_1.default.createElement(Layout, Object.assign({}, props, { value: valueName }),
+                react_1.default.createElement(react_1.default.Fragment, null, valueName)));
+        }
+        return valueName;
+    }, [Layout, valueName]);
+    if (!value || !Object.keys(value).length) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        wrappedValue,
+        specProperties[valueKey] ? (react_1.default.createElement(__1.GroupIndent, null,
+            react_1.default.createElement(core_1.ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` }))) : null));
+};
+exports.OneOfView = OneOfView;

package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.css

@@ -0,0 +1,17 @@
+.df-table-array-view__table {
+  margin-bottom: 10px;
+}
+.df-table-array-view__cell {
+  max-width: 150px;
+  min-width: 150px;
+}
+.df-table-array-view__cell_arr, .df-table-array-view__cell_obj {
+  max-width: unset;
+}
+.df-table-array-view__cell_arr > .simple-vertical-accordeon, .df-table-array-view__cell_obj > .simple-vertical-accordeon {
+  margin-bottom: 0;
+}
+.df-table-array-view__cell_bool {
+  max-width: 50px;
+  min-width: 50px;
+}

package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableArrayView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('table-array-view');
+const TableArrayView = ({ value = [], spec, 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: (__, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
+        };
+        const columns = table.map(({ property, label }) => ({
+            id: property,
+            name: label,
+            template: (_, idx) => {
+                var _a;
+                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}[${idx}].${property}` },
+                    react_1.default.createElement(core_1.ViewController, { spec: entitySpec, name: `${name}[${idx}].${property}` })));
+            },
+        }));
+        return [idxColumn, ...columns];
+    }, [name, spec]);
+    if (!columns) {
+        return null;
+    }
+    return value.length ? (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Table, { className: b('table'), data: value, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top" }))) : null;
+};
+exports.TableArrayView = TableArrayView;

package/build/cjs/lib/kit/components/Views/TableArrayView/index.js

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

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

@@ -0,0 +1,20 @@
+.df-text-area-view {
+  display: flex;
+}
+.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;
+}
+.df-text-area-view__chevron_open {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaView = 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 utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('text-area-view');
+const TextAreaView = ({ value = '' }) => {
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const isValueLong = react_1.default.useMemo(() => value.length > 50, [value]);
+    const handleClick = react_1.default.useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    return (react_1.default.createElement("div", { className: b({ active: isValueLong }), onClick: isValueLong ? handleClick : undefined },
+        react_1.default.createElement("div", { className: b('text-view', { open: isOpen }) }, value),
+        isValueLong ? (react_1.default.createElement("div", null,
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: b('chevron', { open: isOpen }), size: 16 }))) : null));
+};
+exports.TextAreaView = TextAreaView;

package/build/cjs/lib/kit/components/Views/TextAreaView/index.js

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ArrayBaseView"), exports);
+tslib_1.__exportStar(require("./BaseView"), exports);
+tslib_1.__exportStar(require("./CardOneOfView"), exports);
+tslib_1.__exportStar(require("./MonacoInputView"), exports);
+tslib_1.__exportStar(require("./MultiSelectView"), exports);
+tslib_1.__exportStar(require("./NumberWithScaleView"), exports);
+tslib_1.__exportStar(require("./ObjectBaseView"), exports);
+tslib_1.__exportStar(require("./OneOfCardView"), exports);
+tslib_1.__exportStar(require("./OneOfView"), exports);
+tslib_1.__exportStar(require("./TableArrayView"), exports);
+tslib_1.__exportStar(require("./TextAreaView"), exports);

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordeonCard"), exports);
+tslib_1.__exportStar(require("./Card"), exports);
+tslib_1.__exportStar(require("./ErrorWrapper"), exports);
+tslib_1.__exportStar(require("./GroupIndent"), exports);
+tslib_1.__exportStar(require("./Inputs"), exports);
+tslib_1.__exportStar(require("./Layouts"), exports);
+tslib_1.__exportStar(require("./LongValue"), exports);
+tslib_1.__exportStar(require("./SimpleVerticalAccordeon"), exports);
+tslib_1.__exportStar(require("./Views"), exports);
+tslib_1.__exportStar(require("./ViewLayouts"), exports);