@gravity-ui/dashkit 8.9.1 → 8.10.1

package/README.md

@@ -30,6 +30,8 @@ interface DashKitProps {
   onItemEdit: ({id}: {id: string}) => void;
   onChange: (data: {config: Config; itemsStateAndParams: ItemsStateAndParams}) => void;
   onDrop: (dropProps: ItemDropProps) => void;
+  onItemMountChange: (item: ConfigItem, state: {isAsync: boolead; isMounted: boolean}) => void;
+  onItemRender: (item: ConfigItem) => void;
   defaultGlobalParams: GlobalParams;
   globalParams: GlobalParams;
   itemsStateAndParams: ItemsStateAndParams;
@@ -48,6 +50,8 @@ interface DashKitProps {
 - **onItemEdit**: Called when you click to edit a widget.
 - **onChange**: Called when config or [itemsStateAndParams](#temsStateAndParams) are changed.
 - **onDrop**: Called when item dropped from ActionPanel using (#DashKitDnDWrapper)
+- **onItemMountChange**: Called when item mount state changed
+- **onItemRender**: Called when item render complete
 - **defaultGlobalParams**, **globalParams**: [Parameters](#Params) that affect all widgets. In DataLens, `defaultGlobalParams` are global parameters set in the dashboard settings. `globalParams` are globals parameters that can be set in the url.
 - **itemsStateAndParams**: [itemsStateAndParams](#temsStateAndParams).
 - **settings**: DashKit settings.

package/build/cjs/components/DashKit/DashKit.d.ts

@@ -18,6 +18,11 @@ interface DashKitDefaultProps {
         groups?: DashKitGroup[];
     }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
+    onItemMountChange?: (item: ConfigItem, state: {
+        isAsync: boolean;
+        isMounted: boolean;
+    }) => void;
+    onItemRender?: (item: ConfigItem) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

package/build/cjs/components/GridItem/GridItem.js

@@ -38,6 +38,7 @@ const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
+        this._isAsyncItem = false;
         this.state = {
             isFocused: false,
         };
@@ -56,6 +57,33 @@ class GridItem extends react_1.default.PureComponent {
                 this.controller = null;
             });
         };
+        this.onMountChange = (isMounted) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isMounted) {
+                this._inited = true;
+                (_b = (_a = this.props).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+                if (!this._isAsyncItem) {
+                    (_d = (_c = this.props).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
+                }
+            }
+            else {
+                (_f = (_e = this.props).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+            }
+        };
+        this.onBeforeLoad = () => {
+            this._isAsyncItem = true;
+            return this.onLoad;
+        };
+        this.onLoad = () => {
+            var _a, _b;
+            (_b = (_a = this.props).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+        };
     }
     renderOverlay() {
         const { isPlaceholder } = this.props;
@@ -71,7 +99,7 @@ class GridItem extends react_1.default.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -96,7 +124,7 @@ class GridItem extends react_1.default.PureComponent {
             }
             : {})),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }

package/build/cjs/components/GridLayout/GridLayout.js

@@ -287,7 +287,7 @@ class GridLayout extends react_1.default.PureComponent {
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
-        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
@@ -310,7 +310,7 @@ class GridLayout extends react_1.default.PureComponent {
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName) }));
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

package/build/cjs/components/Item/Item.d.ts

@@ -61,7 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/cjs/components/Item/Item.js

@@ -7,9 +7,18 @@ const prepareItem_1 = require("../../hocs/prepareItem");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
     var _a, _b;
-    if (!registerManager.check(type)) {
+    const isRegisteredType = registerManager.check(type);
+    react_1.default.useLayoutEffect(() => {
+        if (isRegisteredType && !isPlaceholder) {
+            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            return () => {
+                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+            };
+        }
+    }, []);
+    if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
@@ -25,5 +34,7 @@ Item.propTypes = {
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
     isPlaceholder: prop_types_1.default.bool,
+    onMountChange: prop_types_1.default.func,
+    onBeforeLoad: prop_types_1.default.func,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

package/build/cjs/hocs/prepareItem.d.ts

@@ -61,7 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/cjs/hocs/prepareItem.js

@@ -15,7 +15,7 @@ function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -24,6 +24,7 @@ function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
+                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -55,10 +56,10 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
             }
         },
         _a.propTypes = {
@@ -71,7 +72,9 @@ function prepareItem(Component) {
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
             isPlaceholder: prop_types_1.default.bool,
+            onBeforeLoad: prop_types_1.default.func,
             forwardedPluginRef: prop_types_1.default.any,
+            onMountChange: prop_types_1.default.func,
         },
         _a.contextType = DashKitContext_1.DashKitContext,
         _a;

package/build/cjs/hocs/withContext.js

@@ -320,6 +320,8 @@ function useMemoStateContext(props) {
         onItemStateAndParamsChange,
         onDrop,
         onDropDragOver,
+        onItemMountChange: props.onItemMountChange,
+        onItemRender: props.onItemRender,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -347,6 +349,8 @@ function useMemoStateContext(props) {
         onDrop,
         onDropDragOver,
         onLayoutChange,
+        props.onItemMountChange,
+        props.onItemRender,
         getItemsMeta,
         reloadItems,
         memorizeOriginalLayout,

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

@@ -7,8 +7,8 @@ export declare const useCalcPropsLayout: (config: Config, registerManager: Regis
     x: number;
     y: number;
     parent?: string | undefined;
-    minW: number;
-    minH: number;
+    minW?: number | undefined;
+    minH?: number | undefined;
     maxW?: number | undefined;
     maxH?: number | undefined;
 }[];

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

@@ -15,6 +15,7 @@ export interface PluginTextProps extends PluginWidgetProps {
     data: {
         text: string;
     } & PluginWidgetProps['data'];
+    onBeforeRender: () => () => void;
 }
 interface PluginTextState {
     htmlText: string;

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

@@ -80,6 +80,7 @@ class PluginText extends react_1.default.PureComponent {
             return;
         }
         this.setState({ status: LoadStatus.Pending });
+        const onLoadComplete = this.props.onBeforeLoad();
         try {
             let htmlText = '';
             if (this.state.text && this.state.text.trim()) {
@@ -100,6 +101,7 @@ class PluginText extends react_1.default.PureComponent {
             }
             this.setState({ status: LoadStatus.Fail });
         }
+        onLoadComplete();
     }
     get withMarkdown() {
         return typeof this.props.apiHandler === 'function';

package/build/cjs/typings/plugin.d.ts

@@ -8,6 +8,7 @@ export interface PluginWidgetProps<T = StringParams> {
     params: T;
     state: ItemState;
     onStateAndParamsChange: (stateAndParams: ItemStateAndParams, options?: ItemStateAndParamsChangeOptions) => void;
+    onBeforeLoad: () => () => void;
     width: number;
     height: number;
     data: ConfigItem['data'];

package/build/cjs/utils/__tests__/update-manager.test.js

@@ -188,6 +188,104 @@ beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation(jest.fn());
 });
 describe('UpdateManager', () => {
+    describe('addItem', () => {
+        it('add new item', () => {
+            expect(update_manager_1.UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 4, x: 0, y: 0 },
+                config: config,
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { h: 4, w: 4, x: 0, y: 32, i: 'EZ' }] }));
+        });
+        it('add new item excludeIds', () => {
+            expect(update_manager_1.UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 4, x: 0, y: 0 },
+                config: config,
+                options: {
+                    excludeIds: ['EZ'],
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 16, items: [
+                    ...config.items,
+                    {
+                        id: '1n',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { h: 4, w: 4, x: 0, y: 32, i: '1n' }] }));
+        });
+        it('add new item with layout update', () => {
+            const updateLayout = [
+                { h: 4, i: 'al', w: 4, x: 8, y: 4 },
+                { h: 16, i: 'Q8', w: 12, x: 12, y: 4 },
+                { h: 2, i: 'L5', w: 8, x: 0, y: 6 },
+                { h: 2, i: 'C8', w: 8, x: 10, y: 34 },
+                { h: 2, i: 'lko', w: 8, x: 0, y: 16 },
+                { h: 2, i: 'qY', w: 8, x: 0, y: 28 },
+            ];
+            expect(update_manager_1.UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 12, x: 0, y: 0 },
+                config: config,
+                options: {
+                    updateLayout,
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...updateLayout, { h: 4, w: 12, x: 0, y: 0, i: 'EZ' }] }));
+        });
+    });
+    describe('removeItem', () => {
+        it('remove item by id', () => {
+            const deleteId = 'lko';
+            expect(update_manager_1.UpdateManager.removeItem({ id: deleteId, config, itemsStateAndParams: {} })).toEqual({
+                config: Object.assign(Object.assign({}, config), { items: config.items.filter(({ id }) => id !== deleteId), layout: config.layout.filter(({ i }) => i !== deleteId) }),
+                itemsStateAndParams: {
+                    __meta__: { queue: [], version: 2 },
+                },
+            });
+        });
+        it('remove item when items and layout not sorted', () => {
+            const deleteId = 'lko';
+            const configCopy = Object.assign(Object.assign({}, config), { layout: config.layout.reverse() });
+            expect(update_manager_1.UpdateManager.removeItem({
+                id: deleteId,
+                config: configCopy,
+                itemsStateAndParams: {},
+            })).toEqual({
+                config: Object.assign(Object.assign({}, config), { items: config.items.filter(({ id }) => id !== deleteId), layout: config.layout.filter(({ i }) => i !== deleteId) }),
+                itemsStateAndParams: {
+                    __meta__: { queue: [], version: 2 },
+                },
+            });
+        });
+    });
     describe('changeStateAndParams', () => {
         it('control adds params to empty itemsStateAndParams: common control', () => {
             expect(update_manager_1.UpdateManager.changeStateAndParams({

package/build/cjs/utils/register-manager.d.ts

@@ -5,8 +5,8 @@ interface RegisterManagerDefaultLayout {
     y: number;
     w: number;
     h: number;
-    minW: number;
-    minH: number;
+    minW?: number;
+    minH?: number;
 }
 export type RegisterManagerPluginLayout = RegisterManagerDefaultLayout & PluginDefaultLayout;
 export interface RegisterManagerPlugin extends Omit<Plugin, 'defaultLayout'> {

package/build/cjs/utils/update-manager.d.ts

@@ -26,13 +26,13 @@ export declare class UpdateManager {
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetNewItemOptions;
+        options?: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;
         namespace: string;
         config: Config;
-        options: SetItemOptions;
+        options?: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams }: RemoveItemArg): {
         config: Config;

package/build/cjs/utils/update-manager.js

@@ -227,7 +227,7 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     return (0, immutability_helper_1.default)(itemsStateAndParams, obj);
 }
 class UpdateManager {
-    static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options, }) {
+    static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options = {}, }) {
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
@@ -260,7 +260,7 @@ class UpdateManager {
             });
         }
     }
-    static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, options, }) {
+    static editItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, config, options = {}, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);
         const { counter, data } = getNewItemData({
             item,
@@ -279,6 +279,7 @@ class UpdateManager {
             return removeItemVersion1({ id, config, itemsStateAndParams });
         }
         const itemIndex = config.items.findIndex((item) => item.id === id);
+        const layoutIndex = config.layout.findIndex((item) => item.i === id);
         const item = config.items[itemIndex];
         let itemIds = [id];
         if ((0, shared_1.isItemWithTabs)(item)) {
@@ -294,7 +295,7 @@ class UpdateManager {
                     $splice: [[itemIndex, 1]],
                 },
                 layout: {
-                    $splice: [[itemIndex, 1]],
+                    $splice: [[layoutIndex, 1]],
                 },
                 connections: {
                     $set: connections,

package/build/esm/components/DashKit/DashKit.d.ts

@@ -18,6 +18,11 @@ interface DashKitDefaultProps {
         groups?: DashKitGroup[];
     }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
+    onItemMountChange?: (item: ConfigItem, state: {
+        isAsync: boolean;
+        isMounted: boolean;
+    }) => void;
+    onItemRender?: (item: ConfigItem) => void;
     defaultGlobalParams: GlobalParams;
     globalParams: GlobalParams;
     itemsStateAndParams: ItemsStateAndParams;

package/build/esm/components/GridItem/GridItem.js

@@ -36,6 +36,7 @@ const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends React.PureComponent {
     constructor() {
         super(...arguments);
+        this._isAsyncItem = false;
         this.state = {
             isFocused: false,
         };
@@ -54,6 +55,33 @@ class GridItem extends React.PureComponent {
                 this.controller = null;
             });
         };
+        this.onMountChange = (isMounted) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isMounted) {
+                this._inited = true;
+                (_b = (_a = this.props).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+                if (!this._isAsyncItem) {
+                    (_d = (_c = this.props).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
+                }
+            }
+            else {
+                (_f = (_e = this.props).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+            }
+        };
+        this.onBeforeLoad = () => {
+            this._isAsyncItem = true;
+            return this.onLoad;
+        };
+        this.onLoad = () => {
+            var _a, _b;
+            (_b = (_a = this.props).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+        };
     }
     renderOverlay() {
         const { isPlaceholder } = this.props;
@@ -69,7 +97,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -94,7 +122,7 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }

package/build/esm/components/GridLayout/GridLayout.js

@@ -284,7 +284,7 @@ class GridLayout extends React.PureComponent {
         return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
-        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, } = this.context;
         const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
@@ -307,7 +307,7 @@ class GridLayout extends React.PureComponent {
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName) }));
+                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender }));
             }),
             this.renderTemporaryPlaceholder()));
     }

package/build/esm/components/Item/Item.d.ts

@@ -61,7 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/esm/components/Item/Item.js

@@ -5,9 +5,18 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
     var _a, _b;
-    if (!registerManager.check(type)) {
+    const isRegisteredType = registerManager.check(type);
+    React.useLayoutEffect(() => {
+        if (isRegisteredType && !isPlaceholder) {
+            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            return () => {
+                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+            };
+        }
+    }, []);
+    if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
@@ -23,5 +32,7 @@ Item.propTypes = {
     registerManager: PropTypes.object,
     type: PropTypes.string,
     isPlaceholder: PropTypes.bool,
+    onMountChange: PropTypes.func,
+    onBeforeLoad: PropTypes.func,
 };
 export default prepareItem(Item);

package/build/esm/hocs/prepareItem.d.ts

@@ -61,7 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/esm/hocs/prepareItem.js

@@ -11,7 +11,7 @@ export function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -20,6 +20,7 @@ export function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
+                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -51,10 +52,10 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                return (React.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
             }
         },
         _a.propTypes = {
@@ -67,7 +68,9 @@ export function prepareItem(Component) {
             height: PropTypes.number,
             transform: PropTypes.string,
             isPlaceholder: PropTypes.bool,
+            onBeforeLoad: PropTypes.func,
             forwardedPluginRef: PropTypes.any,
+            onMountChange: PropTypes.func,
         },
         _a.contextType = DashKitContext,
         _a;

package/build/esm/hocs/withContext.js

@@ -317,6 +317,8 @@ function useMemoStateContext(props) {
         onItemStateAndParamsChange,
         onDrop,
         onDropDragOver,
+        onItemMountChange: props.onItemMountChange,
+        onItemRender: props.onItemRender,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -344,6 +346,8 @@ function useMemoStateContext(props) {
         onDrop,
         onDropDragOver,
         onLayoutChange,
+        props.onItemMountChange,
+        props.onItemRender,
         getItemsMeta,
         reloadItems,
         memorizeOriginalLayout,

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

@@ -7,8 +7,8 @@ export declare const useCalcPropsLayout: (config: Config, registerManager: Regis
     x: number;
     y: number;
     parent?: string | undefined;
-    minW: number;
-    minH: number;
+    minW?: number | undefined;
+    minH?: number | undefined;
     maxW?: number | undefined;
     maxH?: number | undefined;
 }[];

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

@@ -16,6 +16,7 @@ export interface PluginTextProps extends PluginWidgetProps {
     data: {
         text: string;
     } & PluginWidgetProps['data'];
+    onBeforeRender: () => () => void;
 }
 interface PluginTextState {
     htmlText: string;

package/build/esm/plugins/Text/Text.js

@@ -77,6 +77,7 @@ export class PluginText extends React.PureComponent {
             return;
         }
         this.setState({ status: LoadStatus.Pending });
+        const onLoadComplete = this.props.onBeforeLoad();
         try {
             let htmlText = '';
             if (this.state.text && this.state.text.trim()) {
@@ -97,6 +98,7 @@ export class PluginText extends React.PureComponent {
             }
             this.setState({ status: LoadStatus.Fail });
         }
+        onLoadComplete();
     }
     get withMarkdown() {
         return typeof this.props.apiHandler === 'function';

package/build/esm/typings/plugin.d.ts

@@ -8,6 +8,7 @@ export interface PluginWidgetProps<T = StringParams> {
     params: T;
     state: ItemState;
     onStateAndParamsChange: (stateAndParams: ItemStateAndParams, options?: ItemStateAndParamsChangeOptions) => void;
+    onBeforeLoad: () => () => void;
     width: number;
     height: number;
     data: ConfigItem['data'];

package/build/esm/utils/__tests__/update-manager.test.js

@@ -186,6 +186,104 @@ beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation(jest.fn());
 });
 describe('UpdateManager', () => {
+    describe('addItem', () => {
+        it('add new item', () => {
+            expect(UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 4, x: 0, y: 0 },
+                config: config,
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { h: 4, w: 4, x: 0, y: 32, i: 'EZ' }] }));
+        });
+        it('add new item excludeIds', () => {
+            expect(UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 4, x: 0, y: 0 },
+                config: config,
+                options: {
+                    excludeIds: ['EZ'],
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 16, items: [
+                    ...config.items,
+                    {
+                        id: '1n',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { h: 4, w: 4, x: 0, y: 32, i: '1n' }] }));
+        });
+        it('add new item with layout update', () => {
+            const updateLayout = [
+                { h: 4, i: 'al', w: 4, x: 8, y: 4 },
+                { h: 16, i: 'Q8', w: 12, x: 12, y: 4 },
+                { h: 2, i: 'L5', w: 8, x: 0, y: 6 },
+                { h: 2, i: 'C8', w: 8, x: 10, y: 34 },
+                { h: 2, i: 'lko', w: 8, x: 0, y: 16 },
+                { h: 2, i: 'qY', w: 8, x: 0, y: 28 },
+            ];
+            expect(UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 12, x: 0, y: 0 },
+                config: config,
+                options: {
+                    updateLayout,
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...updateLayout, { h: 4, w: 12, x: 0, y: 0, i: 'EZ' }] }));
+        });
+    });
+    describe('removeItem', () => {
+        it('remove item by id', () => {
+            const deleteId = 'lko';
+            expect(UpdateManager.removeItem({ id: deleteId, config, itemsStateAndParams: {} })).toEqual({
+                config: Object.assign(Object.assign({}, config), { items: config.items.filter(({ id }) => id !== deleteId), layout: config.layout.filter(({ i }) => i !== deleteId) }),
+                itemsStateAndParams: {
+                    __meta__: { queue: [], version: 2 },
+                },
+            });
+        });
+        it('remove item when items and layout not sorted', () => {
+            const deleteId = 'lko';
+            const configCopy = Object.assign(Object.assign({}, config), { layout: config.layout.reverse() });
+            expect(UpdateManager.removeItem({
+                id: deleteId,
+                config: configCopy,
+                itemsStateAndParams: {},
+            })).toEqual({
+                config: Object.assign(Object.assign({}, config), { items: config.items.filter(({ id }) => id !== deleteId), layout: config.layout.filter(({ i }) => i !== deleteId) }),
+                itemsStateAndParams: {
+                    __meta__: { queue: [], version: 2 },
+                },
+            });
+        });
+    });
     describe('changeStateAndParams', () => {
         it('control adds params to empty itemsStateAndParams: common control', () => {
             expect(UpdateManager.changeStateAndParams({

package/build/esm/utils/register-manager.d.ts

@@ -5,8 +5,8 @@ interface RegisterManagerDefaultLayout {
     y: number;
     w: number;
     h: number;
-    minW: number;
-    minH: number;
+    minW?: number;
+    minH?: number;
 }
 export type RegisterManagerPluginLayout = RegisterManagerDefaultLayout & PluginDefaultLayout;
 export interface RegisterManagerPlugin extends Omit<Plugin, 'defaultLayout'> {

package/build/esm/utils/update-manager.d.ts

@@ -26,13 +26,13 @@ export declare class UpdateManager {
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetNewItemOptions;
+        options?: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;
         namespace: string;
         config: Config;
-        options: SetItemOptions;
+        options?: SetItemOptions;
     }): Config;
     static removeItem({ id, config, itemsStateAndParams }: RemoveItemArg): {
         config: Config;

package/build/esm/utils/update-manager.js

@@ -222,7 +222,7 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     return update(itemsStateAndParams, obj);
 }
 export class UpdateManager {
-    static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options, }) {
+    static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options = {}, }) {
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
@@ -255,7 +255,7 @@ export class UpdateManager {
             });
         }
     }
-    static editItem({ item, namespace = DEFAULT_NAMESPACE, config, options, }) {
+    static editItem({ item, namespace = DEFAULT_NAMESPACE, config, options = {}, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);
         const { counter, data } = getNewItemData({
             item,
@@ -274,6 +274,7 @@ export class UpdateManager {
             return removeItemVersion1({ id, config, itemsStateAndParams });
         }
         const itemIndex = config.items.findIndex((item) => item.id === id);
+        const layoutIndex = config.layout.findIndex((item) => item.i === id);
         const item = config.items[itemIndex];
         let itemIds = [id];
         if (isItemWithTabs(item)) {
@@ -289,7 +290,7 @@ export class UpdateManager {
                     $splice: [[itemIndex, 1]],
                 },
                 layout: {
-                    $splice: [[itemIndex, 1]],
+                    $splice: [[layoutIndex, 1]],
                 },
                 connections: {
                     $set: connections,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.9.1",
+  "version": "8.10.1",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {