@gravity-ui/dashkit 3.0.1

package/build/cjs/hocs/withContext.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const DashKitContext_1 = require("../context/DashKitContext");
+const utils_1 = require("../utils");
+const shared_1 = require("../shared");
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const react_grid_layout_1 = require("react-grid-layout");
+const LAYOUT_COMPACTING_TYPE = 'vertical';
+function withContext(Component) {
+    var _a;
+    return _a = class DashKitWithContext extends react_1.default.Component {
+            constructor() {
+                super(...arguments);
+                // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
+                // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
+                // расположении конкретного виджета на сетке) будет храниться в стейте, но, для того, чтобы в стор попадал
+                // лэйаут без учета вижетов с активированной автовысотой, в момент "подстройки" высоты виджета значение h
+                // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
+                this.state = { currentLayout: this.props.layout };
+                this.originalLayouts = {};
+                this.adjustedLayouts = {};
+                // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
+                // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
+                // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
+                // виджетов автовысота была деактивирована) корректируем их используя this.originalLayouts
+                this._onLayoutChange = (layout) => {
+                    const currentLayout = layout.map((item) => {
+                        if (item.i in this.originalLayouts) {
+                            return Object.assign(Object.assign({}, this.originalLayouts[item.i]), { w: item.w, x: item.x, y: item.y });
+                        }
+                        else {
+                            return Object.assign({}, item);
+                        }
+                    });
+                    // [experimental] if the _prevent Double Compact is enabled, then skip recalculate layout with auto height
+                    // после того, как у виждета активировали автовысоту и его параметр "h" изменился, это приведёт, также, и к
+                    // изменению параметра (координаты) "y" у элементов расположенных под ним, поэтому, после того, как
+                    // значения параметра "h" виджетов с активированной автовысотой были изменены, необходимо изменить и
+                    // координату "y" виджетов расположенных ниже
+                    const compactedLayout = this.props._EXPERIMENTAL_preventDoubleCompact
+                        ? currentLayout
+                        : react_grid_layout_1.utils.compact(currentLayout, LAYOUT_COMPACTING_TYPE, this.props.registerManager.gridLayout.cols);
+                    const newConfig = utils_1.UpdateManager.updateLayout({
+                        layout: compactedLayout,
+                        config: this.props.config,
+                    });
+                    if (!(0, isEqual_1.default)(newConfig.layout, this.props.config.layout)) {
+                        this._onChange({
+                            config: newConfig,
+                        });
+                    }
+                };
+                this._onItemRemove = (id) => {
+                    const { config, itemsStateAndParams } = this.props;
+                    this._onChange(utils_1.UpdateManager.removeItem({ id, config, itemsStateAndParams }));
+                };
+                this._onItemEdit = (configItem) => {
+                    this.props.onItemEdit(configItem);
+                };
+                this._onItemStateAndParamsChange = (id, stateAndParams) => {
+                    const { config, itemsStateAndParams } = this.props;
+                    this._onChange({
+                        itemsStateAndParams: utils_1.UpdateManager.changeStateAndParams({
+                            id,
+                            config,
+                            stateAndParams,
+                            itemsStateAndParams,
+                        }),
+                    });
+                };
+                this._memorizeOriginalLayout = (widgetId, preAutoHeightLayout, postAutoHeightLayout) => {
+                    if (!(widgetId in this.originalLayouts)) {
+                        this.originalLayouts[widgetId] = preAutoHeightLayout;
+                    }
+                    this.adjustedLayouts[widgetId] = postAutoHeightLayout;
+                    this.setState({
+                        currentLayout: this.props.layout.map((item) => {
+                            if (item.i in this.adjustedLayouts) {
+                                return Object.assign(Object.assign({}, this.adjustedLayouts[item.i]), { w: item.w, x: item.x, y: item.y });
+                            }
+                            else {
+                                return Object.assign({}, item);
+                            }
+                        }),
+                    });
+                };
+                this._revertToOriginalLayout = (widgetId) => {
+                    this.setState({
+                        currentLayout: this.state.currentLayout.map((item) => {
+                            if (item.i === widgetId) {
+                                return Object.assign(Object.assign({}, this.originalLayouts[item.i]), { w: item.w, x: item.x, y: item.y });
+                            }
+                            else {
+                                return Object.assign({}, item);
+                            }
+                        }),
+                    });
+                    delete this.adjustedLayouts[widgetId];
+                    delete this.originalLayouts[widgetId];
+                };
+                this._getItemsMeta = (pluginsRefs) => {
+                    return pluginsRefs
+                        .map((ref) => {
+                        if (!(ref && typeof ref.getMeta === 'function')) {
+                            return undefined;
+                        }
+                        return ref.getMeta();
+                    })
+                        .filter(Boolean);
+                };
+                this._getLayout = () => {
+                    return this.props.layout.map((item) => {
+                        if (item.i in this.adjustedLayouts) {
+                            return Object.assign(Object.assign({}, this.adjustedLayouts[item.i]), { w: item.w, x: item.x, y: item.y });
+                        }
+                        else {
+                            return Object.assign({}, item);
+                        }
+                    });
+                };
+                this._reloadItems = (pluginsRefs, data) => {
+                    pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+                };
+            }
+            _onChange({ config = this.props.config, itemsStateAndParams = this.props.itemsStateAndParams, }) {
+                if (!((0, isEqual_1.default)(config, this.props.config) &&
+                    (0, isEqual_1.default)(itemsStateAndParams, this.props.itemsStateAndParams))) {
+                    this.props.onChange({
+                        config,
+                        itemsStateAndParams,
+                    });
+                }
+            }
+            get _itemsParams() {
+                const { config, itemsStateAndParams, globalParams, defaultGlobalParams, registerManager, } = this.props;
+                return (0, shared_1.getItemsParams)({
+                    defaultGlobalParams,
+                    globalParams,
+                    config,
+                    itemsStateAndParams,
+                    plugins: registerManager.getPlugins(),
+                });
+            }
+            get _itemsState() {
+                const { config, itemsStateAndParams } = this.props;
+                return (0, shared_1.getItemsState)({ config, itemsStateAndParams });
+            }
+            get _contextValue() {
+                return {
+                    getLayout: this._getLayout,
+                    config: this.props.config,
+                    context: this.props.context,
+                    overlayControls: this.props.overlayControls,
+                    noOverlay: this.props.noOverlay,
+                    defaultGlobalParams: this.props.globalParams,
+                    globalParams: this.props.globalParams,
+                    editMode: this.props.editMode,
+                    settings: this.props.settings,
+                    itemsState: this._itemsState,
+                    itemsParams: this._itemsParams,
+                    registerManager: this.props.registerManager,
+                    onItemStateAndParamsChange: this._onItemStateAndParamsChange,
+                    removeItem: this._onItemRemove,
+                    editItem: this._onItemEdit,
+                    layoutChange: this._onLayoutChange,
+                    getItemsMeta: this._getItemsMeta,
+                    reloadItems: this._reloadItems,
+                    memorizeOriginalLayout: this._memorizeOriginalLayout,
+                    revertToOriginalLayout: this._revertToOriginalLayout,
+                    forwardedMetaRef: this.props.forwardedMetaRef,
+                    draggableHandleClassName: this.props.draggableHandleClassName,
+                };
+            }
+            render() {
+                return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: this._contextValue },
+                    react_1.default.createElement(Component, null)));
+            }
+        },
+        _a.propTypes = {
+            editMode: prop_types_1.default.bool,
+            context: prop_types_1.default.object,
+            overlayControls: prop_types_1.default.object,
+            config: prop_types_1.default.object,
+            onItemEdit: prop_types_1.default.func,
+            onChange: prop_types_1.default.func,
+            defaultGlobalParams: prop_types_1.default.object,
+            globalParams: prop_types_1.default.object,
+            itemsStateAndParams: prop_types_1.default.object,
+            registerManager: prop_types_1.default.object,
+            layout: prop_types_1.default.array,
+            settings: prop_types_1.default.object,
+            forwardedMetaRef: prop_types_1.default.object,
+            noOverlay: prop_types_1.default.bool,
+            draggableHandleClassName: prop_types_1.default.string,
+            _EXPERIMENTAL_preventDoubleCompact: prop_types_1.default.bool,
+        },
+        _a;
+}
+exports.withContext = withContext;

package/build/cjs/hooks/useCalcLayout.d.ts

@@ -0,0 +1,13 @@
+import { Config } from '../shared';
+import { RegisterManager } from '../utils';
+export declare const useCalcPropsLayout: (config: Config, registerManager: RegisterManager) => {
+    i: string;
+    h: number;
+    w: number;
+    x: number;
+    y: number;
+    minW: number;
+    minH: number;
+    maxW?: number | undefined;
+    maxH?: number | undefined;
+}[];

package/build/cjs/hooks/useCalcLayout.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalcPropsLayout = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+function onUpdatePropsConfig(config, registerManager) {
+    return config.layout.map((itemLayout, i) => {
+        const { type } = config.items[i];
+        return Object.assign(Object.assign({}, registerManager.getItem(type).defaultLayout), itemLayout);
+    });
+}
+const useCalcPropsLayout = (config, registerManager) => {
+    const [prevConfig, setPrevConfig] = react_1.default.useState(config);
+    const [layout, updateLayout] = react_1.default.useState(onUpdatePropsConfig(config, registerManager));
+    if (!(0, isEqual_1.default)(prevConfig.layout, config.layout)) {
+        setPrevConfig(config);
+        updateLayout(onUpdatePropsConfig(config, registerManager));
+    }
+    return layout;
+};
+exports.useCalcPropsLayout = useCalcPropsLayout;
+// export const useManageLayout = (config: Config, registerManager: RegisterManager) => {
+//     const propsLayout = useCalcPropsLayout(config, registerManager);
+//     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
+//     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
+//     // расположении конкретного виджета на сетке) будет храниться в стейте, но, для того, чтобы в стор попадал
+//     // лэйаут без учета вижетов с активированной автовысотой, в момент "подстройки" высоты виджета значение h
+//     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
+//     const [currentLayout, setCurrentLayout] = React.useState(propsLayout);
+// };

package/build/cjs/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "button_retry": "Repeat",
+  "label_render-markdown-error": "Ошибка преобразования в markdown",
+  "label_settings": "Settings",
+  "label_copy": "Copy",
+  "label_delete": "Delete",
+  "label_error": "Error"
+}

package/build/cjs/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { I18N } from '@gravity-ui/i18n';
+export declare const i18n: I18N;
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/i18n/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/i18n");
+const configure_1 = require("../utils/configure");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = new i18n_1.I18N();
+const COMPONENT = 'dashkit';
+exports.i18n.registerKeyset('en', COMPONENT, en_json_1.default);
+exports.i18n.registerKeyset('ru', COMPONENT, ru_json_1.default);
+exports.i18n.setLang((0, configure_1.getConfig)().lang || 'en');
+(0, configure_1.subscribeConfigure)((config) => {
+    if (config.lang) {
+        exports.i18n.setLang(config.lang);
+    }
+});
+exports.default = exports.i18n.keyset(COMPONENT);

package/build/cjs/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "button_retry": "Повторить",
+  "label_render-markdown-error": "Ошибка преобразования в markdown",
+  "label_settings": "Настройки",
+  "label_copy": "Копировать",
+  "label_delete": "Удалить",
+  "label_error": "Ошибка"
+}

package/build/cjs/icons/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CloseIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CloseIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CloseIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 10 10", width: "10", height: "10", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { d: "M9.75592 8.57741C10.0814 8.90285 10.0814 9.43049 9.75592 9.75592C9.43049 10.0814 8.90285 10.0814 8.57741 9.75592L5 6.17851L1.42259 9.75592C1.09715 10.0814 0.569515 10.0814 0.244078 9.75592C-0.0813592 9.43049 -0.0813592 8.90285 0.244078 8.57741L3.82149 5L0.244078 1.42259C-0.0813592 1.09715 -0.0813592 0.569515 0.244078 0.244078C0.569515 -0.0813592 1.09715 -0.0813592 1.42259 0.244078L5 3.82149L8.57741 0.244078C8.90285 -0.0813592 9.43049 -0.0813592 9.75592 0.244078C10.0814 0.569515 10.0814 1.09715 9.75592 1.42259L6.17851 5L9.75592 8.57741Z" })));
+}
+exports.CloseIcon = CloseIcon;

package/build/cjs/icons/CogIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CogIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CogIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CogIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CogIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { d: "M11.844 16.156a4 4 0 1 1 0-8 4 4 0 0 1 0 8m6-4c0-.029-.004-.058-.004-.087l1.848-.34-.362-1.968-1.852.342a5.992 5.992 0 0 0-1.454-2.246l1.068-1.55-1.646-1.134-1.07 1.55a5.95 5.95 0 0 0-2.528-.567c-.03 0-.058.004-.087.004l-.341-1.848-1.967.363.34 1.851A5.996 5.996 0 0 0 7.546 7.98l-1.55-1.068L4.86 8.558l1.55 1.07a5.95 5.95 0 0 0-.567 2.528c0 .03.004.058.004.087L4 12.584l.362 1.967 1.852-.342a5.992 5.992 0 0 0 1.454 2.246L6.6 18.005l1.646 1.134 1.069-1.55a5.95 5.95 0 0 0 2.529.567c.029 0 .058-.004.087-.004L12.27 20l1.968-.363-.341-1.85a5.996 5.996 0 0 0 2.245-1.455l1.55 1.068 1.134-1.646-1.55-1.069a5.95 5.95 0 0 0 .567-2.529" })));
+}
+exports.CogIcon = CogIcon;

package/build/cjs/icons/CopyIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CopyIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CopyIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function CopyIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { d: "M7 14h7V7H7v7zM5 5h11v11H5V5zm4-2v1-1zm1-3H0v10V0h10zM0 10v1h4-4v-1zM10 0h1v4-4h-1zM3 9h1-1zM0 0h11v4H9V2H2v7h2v2H0V0z" })));
+}
+exports.CopyIcon = CopyIcon;

package/build/cjs/icons/DeleteIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DeleteIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/DeleteIcon.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function DeleteIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
+        react_1.default.createElement("g", null,
+            react_1.default.createElement("path", { d: "M13.29 1.605h-2.857V.522A.522.522 0 0 0 9.91 0H6.089a.522.522 0 0 0-.522.522v1.083H2.71a.522.522 0 0 0-.521.522v1.605a.52.52 0 0 0 .521.521h.159L3.345 15.5c.012.28.242.5.521.5h8.268c.28 0 .51-.22.521-.5l.477-11.247h.159a.522.522 0 0 0 .521-.521V2.127a.522.522 0 0 0-.521-.522zm-6.679-.562h2.778v.562H6.611v-.562zm5.023 13.914H4.366L3.912 4.253h8.176l-.454 10.704zM12.769 3.21H3.23v-.562h9.538v.562z" }),
+            react_1.default.createElement("path", { d: "M5.901 5.853a.522.522 0 0 0-.522.522v6.46a.522.522 0 0 0 1.044 0v-6.46a.522.522 0 0 0-.522-.522zm2.099 0a.522.522 0 0 0-.522.522v6.46a.522.522 0 1 0 1.044 0v-6.46A.522.522 0 0 0 8 5.853zm2.099 0a.522.522 0 0 0-.522.522v6.46a.522.522 0 0 0 1.044 0v-6.46a.522.522 0 0 0-.522-.522z" }))));
+}
+exports.DeleteIcon = DeleteIcon;

package/build/cjs/icons/DotsIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DotsIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/DotsIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DotsIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function DotsIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { d: "M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z" })));
+}
+exports.DotsIcon = DotsIcon;

package/build/cjs/icons/TickIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function TickIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/TickIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TickIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function TickIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { fillRule: "evenodd", d: "M5.95 11.008L1.863 6.572.392 7.927l5.533 6.003 9.67-10.114-1.444-1.381z" })));
+}
+exports.TickIcon = TickIcon;

package/build/cjs/icons/WarningIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function WarningIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/WarningIcon.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function WarningIcon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
+        react_1.default.createElement("path", { fillRule: "evenodd", d: "M8 16A8 8 0 118 0a8 8 0 010 16zm0-7a1 1 0 001-1V4a1 1 0 10-2 0v4a1 1 0 001 1zm0 1a1 1 0 100 2 1 1 0 000-2z" })));
+}
+exports.WarningIcon = WarningIcon;

package/build/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './utils';
+export * from './constants';
+export * from './typings';
+export * from './shared';

package/build/cjs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./typings"), exports);
+tslib_1.__exportStar(require("./shared"), exports);

package/build/cjs/plugins/Text/Text.css

@@ -0,0 +1,34 @@
+.dashkit-plugin-text {
+  --rc-loader-active-color: var(--yc-color-base-special);
+  --rc-loader-off-color: var(--yc-color-base-selection-hover);
+  white-space: pre-wrap;
+  overflow: auto;
+  height: 100%;
+  padding-right: 5px;
+}
+.dashkit-plugin-text_withMarkdown {
+  white-space: normal;
+}
+.dashkit-plugin-text_loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashkit-plugin-text_error {
+  padding: 10px;
+}
+.dashkit-plugin-text__error {
+  color: var(--yc-color-text-danger);
+}
+.dashkit-plugin-text__loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashkit-plugin-text__loader-view {
+  padding: 0 14px;
+  margin-right: 14px;
+}
+.dashkit-plugin-text__loader-text {
+  font-size: 20px;
+}

package/build/cjs/plugins/Text/Text.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { PluginWidgetProps, Plugin } from '../../typings';
+declare enum LoadStatus {
+    Pending = "pending",
+    Success = "success",
+    Fail = "fail"
+}
+export declare type PluginTextApiHandler = (data: {
+    text: string;
+}) => Promise<{
+    result: string;
+}>;
+export interface PluginTextProps extends PluginWidgetProps {
+    apiHandler?: PluginTextApiHandler;
+    data: {
+        text: string;
+    } & PluginWidgetProps['data'];
+}
+interface PluginTextState {
+    htmlText: string;
+    status: LoadStatus;
+    needUpdate?: boolean;
+    text?: string;
+}
+export declare class PluginText extends React.PureComponent<PluginTextProps, PluginTextState> {
+    static getDerivedStateFromProps(props: PluginTextProps, state: PluginTextState): {
+        text: string;
+        needUpdate: boolean;
+    };
+    state: PluginTextState;
+    private _isUnmounted;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private renderLoader;
+    private renderError;
+    private renderText;
+    private getMarkdown;
+    private onRetryClick;
+    get withMarkdown(): boolean;
+}
+declare type PluginDataProps = Omit<PluginTextProps, 'apiHandler'>;
+export declare type PluginObjectSettings = {
+    apiHandler?: PluginTextApiHandler;
+};
+export declare type PluginObject = Plugin<PluginDataProps> & {
+    setSettings: (settings: PluginObjectSettings) => PluginObject;
+    _apiHandler?: PluginTextApiHandler;
+};
+declare const plugin: PluginObject;
+export default plugin;

package/build/cjs/plugins/Text/Text.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginText = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
+// need to set markdown styles separately
+// for instance can use yfm-transform
+const b = (0, bem_cn_lite_1.default)('dashkit-plugin-text');
+var LoadStatus;
+(function (LoadStatus) {
+    LoadStatus["Pending"] = "pending";
+    LoadStatus["Success"] = "success";
+    LoadStatus["Fail"] = "fail";
+})(LoadStatus || (LoadStatus = {}));
+class PluginText extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            htmlText: '',
+            status: this.withMarkdown ? LoadStatus.Pending : LoadStatus.Success,
+        };
+        this._isUnmounted = false;
+        this.onRetryClick = () => {
+            this.getMarkdown();
+        };
+    }
+    static getDerivedStateFromProps(props, state) {
+        const { data: { text }, } = props;
+        const needUpdate = text !== state.text;
+        return {
+            text,
+            needUpdate,
+        };
+    }
+    componentDidMount() {
+        this.getMarkdown();
+    }
+    componentDidUpdate() {
+        if (this.state.needUpdate) {
+            this.getMarkdown();
+        }
+    }
+    componentWillUnmount() {
+        this._isUnmounted = true;
+    }
+    render() {
+        switch (this.state.status) {
+            case LoadStatus.Success:
+                return this.renderText();
+            case LoadStatus.Pending:
+                return this.renderLoader();
+            default:
+                return this.renderError();
+        }
+    }
+    renderLoader() {
+        return (react_1.default.createElement("div", { className: b({ loading: true }) },
+            react_1.default.createElement("div", { className: b('loader') },
+                react_1.default.createElement("div", { className: b('loader-view') },
+                    react_1.default.createElement(uikit_1.Loader, { size: "m" })))));
+    }
+    renderError() {
+        return (react_1.default.createElement("div", { className: b({ error: true }) },
+            react_1.default.createElement("div", { className: b('error') }, (0, i18n_1.default)('label_render-markdown-error')),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(uikit_1.Button, { view: "action", size: "m", onClick: this.onRetryClick }, (0, i18n_1.default)('button_retry')),
+            react_1.default.createElement("br", null)));
+    }
+    renderText() {
+        return (react_1.default.createElement("div", { className: b({ withMarkdown: this.withMarkdown }) }, this.withMarkdown ? (react_1.default.createElement("div", { className: "yfm" // className из стилей для markdown
+            , dangerouslySetInnerHTML: { __html: this.state.htmlText } })) : (this.state.text)));
+    }
+    async getMarkdown() {
+        if (typeof this.props.apiHandler !== 'function') {
+            return;
+        }
+        this.setState({ status: LoadStatus.Pending });
+        try {
+            let htmlText = '';
+            if (this.state.text && this.state.text.trim()) {
+                const loadedData = await this.props.apiHandler({ text: this.state.text });
+                htmlText = loadedData.result;
+            }
+            if (this._isUnmounted) {
+                return;
+            }
+            this.setState({
+                htmlText,
+                status: LoadStatus.Success,
+            });
+        }
+        catch (e) {
+            if (this._isUnmounted) {
+                return;
+            }
+            this.setState({ status: LoadStatus.Fail });
+        }
+    }
+    get withMarkdown() {
+        return typeof this.props.apiHandler === 'function';
+    }
+}
+exports.PluginText = PluginText;
+const plugin = {
+    type: 'text',
+    defaultLayout: { w: 12, h: 6 },
+    setSettings(settings) {
+        const { apiHandler } = settings;
+        plugin._apiHandler = apiHandler;
+        return plugin;
+    },
+    renderer(props, forwardedRef) {
+        return react_1.default.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
+    },
+};
+exports.default = plugin;