@gravity-ui/dashkit 8.17.1 → 8.17.3

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

@@ -81,33 +81,6 @@ 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;
@@ -152,7 +125,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, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
+                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, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -166,6 +139,8 @@ GridItem.propTypes = {
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
     isPlaceholder: prop_types_1.default.bool,
+    onItemMountChange: prop_types_1.default.func,
+    onItemRender: prop_types_1.default.func,
     // from react-grid-layout:
     children: prop_types_1.default.node,
     className: prop_types_1.default.string,

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

@@ -61,9 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: 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,26 +7,56 @@ 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, onMountChange, }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onItemRender, onItemMountChange, item, }) => {
     var _a, _b;
+    // to avoid too frequent re-creation of functions that do not affect the rendering
+    const isAsyncItemRef = react_1.default.useRef(false);
+    const itemRef = react_1.default.useRef(item);
+    const onItemRenderRef = react_1.default.useRef(onItemRender);
+    const onItemMountChangeRef = react_1.default.useRef(onItemMountChange);
+    itemRef.current = item;
+    onItemRenderRef.current = onItemRender;
+    onItemMountChangeRef.current = onItemMountChange;
     const isRegisteredType = registerManager.check(type);
     react_1.default.useLayoutEffect(() => {
+        var _a, _b;
         if (isRegisteredType && !isPlaceholder) {
-            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                isAsync: isAsyncItemRef.current,
+                isMounted: true,
+            });
+            if (!isAsyncItemRef.current) {
+                (_b = onItemRenderRef.current) === null || _b === void 0 ? void 0 : _b.call(onItemRenderRef, itemRef.current);
+            }
             return () => {
-                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+                var _a;
+                (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                    isAsync: isAsyncItemRef.current,
+                    isMounted: false,
+                });
             };
         }
     }, []);
+    const onLoad = react_1.default.useCallback(() => {
+        var _a;
+        (_a = onItemRenderRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemRenderRef, itemRef.current);
+    }, []);
+    const onBeforeLoad = react_1.default.useCallback(() => {
+        isAsyncItemRef.current = true;
+        return onLoad;
+    }, [onLoad]);
+    const itemRendererProps = react_1.default.useMemo(() => {
+        return Object.assign(Object.assign({}, rendererProps), { onBeforeLoad });
+    }, [rendererProps, onBeforeLoad]);
     if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
     if (isPlaceholder) {
         return (react_1.default.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
-            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, itemRendererProps, forwardedPluginRef)) || null));
     }
-    return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+    return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(itemRendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
     forwardedPluginRef: prop_types_1.default.any,
@@ -34,7 +64,8 @@ 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,
+    onItemRender: prop_types_1.default.func,
+    onItemMountChange: prop_types_1.default.func,
+    item: prop_types_1.default.object,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

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

@@ -3,19 +3,21 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
     pluginsRefs: any[];
+    sortedLayoutItems: any;
+    _memoLayout: any;
+    _memoForwardedPluginRef: any[];
+    _memoAdjustWidgetLayout: any[];
     state: {
         activeTabId: null;
         indexesOfItemsWithActiveAutoheight: {};
     };
     componentDidUpdate(prevProps: any, prevState: any): void;
+    getSortedLayoutItems(): any;
+    getMemoForwardRefCallback: (refIndex: any) => any;
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
-    onMountChange: (isMounted: any) => void;
-    _inited: boolean | undefined;
-    onBeforeLoad: () => () => void;
-    _isAsyncItem: boolean | undefined;
-    onLoad: () => void;
+    getMemoAdjustWidgetLayout: (index: any) => any;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/cjs/components/MobileLayout/MobileLayout.js

@@ -11,10 +11,21 @@ class MobileLayout extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
         this.pluginsRefs = [];
+        this._memoLayout = this.context.layout;
+        this._memoForwardedPluginRef = [];
+        this._memoAdjustWidgetLayout = [];
         this.state = {
             activeTabId: null,
             indexesOfItemsWithActiveAutoheight: {},
         };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this.adjustWidgetLayout = (index, { needSetDefault }) => {
             if (needSetDefault) {
                 const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
@@ -27,32 +38,11 @@ class MobileLayout extends react_1.default.PureComponent {
                 });
             }
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
+        this.getMemoAdjustWidgetLayout = (index) => {
+            if (!this._memoAdjustWidgetLayout[index]) {
+                this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
             }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+            return this._memoAdjustWidgetLayout[index];
         };
     }
     componentDidUpdate(prevProps, prevState) {
@@ -63,17 +53,23 @@ class MobileLayout extends react_1.default.PureComponent {
             });
         }
     }
+    getSortedLayoutItems() {
+        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
+            return this.sortedLayoutItems;
+        }
+        this._memoLayout = this.context.layout;
+        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+        this.sortedLayoutItems = (0, helpers_1.getSortedConfigItems)(this.context.config, hasOrderId);
+        return this.sortedLayoutItems;
+    }
     render() {
         const { config, layout } = this.context;
         this.pluginsRefs.length = config.items.length;
-        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
-        const sortedItems = (0, helpers_1.getSortedConfigItems)(config, hasOrderId);
+        const sortedItems = this.getSortedLayoutItems();
         return (react_1.default.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[index] = pluginRef;
-                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
         })));
     }
 }

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

@@ -61,9 +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>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: 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, onBeforeLoad, } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -24,7 +24,6 @@ function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
-                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -56,10 +55,10 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onItemMountChange: onItemMountChange, onItemRender: onItemRender, item: item }));
             }
         },
         _a.propTypes = {
@@ -72,9 +71,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,
+            onItemRender: prop_types_1.default.func,
+            onItemMountChange: 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/esm/components/GridItem/GridItem.js

@@ -79,33 +79,6 @@ 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;
@@ -150,7 +123,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, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })),
+                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, onItemMountChange: this.props.onItemMountChange, onItemRender: this.props.onItemRender })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -164,6 +137,8 @@ GridItem.propTypes = {
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
     isPlaceholder: PropTypes.bool,
+    onItemMountChange: PropTypes.func,
+    onItemRender: PropTypes.func,
     // from react-grid-layout:
     children: PropTypes.node,
     className: PropTypes.string,

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

@@ -61,9 +61,9 @@ declare const _default: {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
-        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemMountChange: 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,26 +5,56 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onItemRender, onItemMountChange, item, }) => {
     var _a, _b;
+    // to avoid too frequent re-creation of functions that do not affect the rendering
+    const isAsyncItemRef = React.useRef(false);
+    const itemRef = React.useRef(item);
+    const onItemRenderRef = React.useRef(onItemRender);
+    const onItemMountChangeRef = React.useRef(onItemMountChange);
+    itemRef.current = item;
+    onItemRenderRef.current = onItemRender;
+    onItemMountChangeRef.current = onItemMountChange;
     const isRegisteredType = registerManager.check(type);
     React.useLayoutEffect(() => {
+        var _a, _b;
         if (isRegisteredType && !isPlaceholder) {
-            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                isAsync: isAsyncItemRef.current,
+                isMounted: true,
+            });
+            if (!isAsyncItemRef.current) {
+                (_b = onItemRenderRef.current) === null || _b === void 0 ? void 0 : _b.call(onItemRenderRef, itemRef.current);
+            }
             return () => {
-                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+                var _a;
+                (_a = onItemMountChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemMountChangeRef, itemRef.current, {
+                    isAsync: isAsyncItemRef.current,
+                    isMounted: false,
+                });
             };
         }
     }, []);
+    const onLoad = React.useCallback(() => {
+        var _a;
+        (_a = onItemRenderRef.current) === null || _a === void 0 ? void 0 : _a.call(onItemRenderRef, itemRef.current);
+    }, []);
+    const onBeforeLoad = React.useCallback(() => {
+        isAsyncItemRef.current = true;
+        return onLoad;
+    }, [onLoad]);
+    const itemRendererProps = React.useMemo(() => {
+        return Object.assign(Object.assign({}, rendererProps), { onBeforeLoad });
+    }, [rendererProps, onBeforeLoad]);
     if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
     if (isPlaceholder) {
         return (React.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
-            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, itemRendererProps, forwardedPluginRef)) || null));
     }
-    return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+    return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(itemRendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
     forwardedPluginRef: PropTypes.any,
@@ -32,7 +62,8 @@ Item.propTypes = {
     registerManager: PropTypes.object,
     type: PropTypes.string,
     isPlaceholder: PropTypes.bool,
-    onMountChange: PropTypes.func,
-    onBeforeLoad: PropTypes.func,
+    onItemRender: PropTypes.func,
+    onItemMountChange: PropTypes.func,
+    item: PropTypes.object,
 };
 export default prepareItem(Item);

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

@@ -3,19 +3,21 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
     pluginsRefs: any[];
+    sortedLayoutItems: any;
+    _memoLayout: any;
+    _memoForwardedPluginRef: any[];
+    _memoAdjustWidgetLayout: any[];
     state: {
         activeTabId: null;
         indexesOfItemsWithActiveAutoheight: {};
     };
     componentDidUpdate(prevProps: any, prevState: any): void;
+    getSortedLayoutItems(): any;
+    getMemoForwardRefCallback: (refIndex: any) => any;
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
-    onMountChange: (isMounted: any) => void;
-    _inited: boolean | undefined;
-    onBeforeLoad: () => () => void;
-    _isAsyncItem: boolean | undefined;
-    onLoad: () => void;
+    getMemoAdjustWidgetLayout: (index: any) => any;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/esm/components/MobileLayout/MobileLayout.js

@@ -9,10 +9,21 @@ class MobileLayout extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.pluginsRefs = [];
+        this._memoLayout = this.context.layout;
+        this._memoForwardedPluginRef = [];
+        this._memoAdjustWidgetLayout = [];
         this.state = {
             activeTabId: null,
             indexesOfItemsWithActiveAutoheight: {},
         };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this.adjustWidgetLayout = (index, { needSetDefault }) => {
             if (needSetDefault) {
                 const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
@@ -25,32 +36,11 @@ class MobileLayout extends React.PureComponent {
                 });
             }
         };
-        this.onMountChange = (isMounted) => {
-            var _a, _b, _c, _d, _e, _f;
-            if (isMounted) {
-                this._inited = true;
-                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
-                if (!this._isAsyncItem) {
-                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
-                }
-            }
-            else {
-                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
-                    isAsync: this._isAsyncItem,
-                    isMounted: isMounted,
-                });
+        this.getMemoAdjustWidgetLayout = (index) => {
+            if (!this._memoAdjustWidgetLayout[index]) {
+                this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
             }
-        };
-        this.onBeforeLoad = () => {
-            this._isAsyncItem = true;
-            return this.onLoad;
-        };
-        this.onLoad = () => {
-            var _a, _b;
-            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+            return this._memoAdjustWidgetLayout[index];
         };
     }
     componentDidUpdate(prevProps, prevState) {
@@ -61,17 +51,23 @@ class MobileLayout extends React.PureComponent {
             });
         }
     }
+    getSortedLayoutItems() {
+        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
+            return this.sortedLayoutItems;
+        }
+        this._memoLayout = this.context.layout;
+        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
+        return this.sortedLayoutItems;
+    }
     render() {
         const { config, layout } = this.context;
         this.pluginsRefs.length = config.items.length;
-        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
-        const sortedItems = getSortedConfigItems(config, hasOrderId);
+        const sortedItems = this.getSortedLayoutItems();
         return (React.createElement("div", { className: b() }, sortedItems.map((item, index) => {
             const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
             return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
-                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[index] = pluginRef;
-                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
+                React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
         })));
     }
 }

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

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

package/package.json

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