@gravity-ui/dashkit 8.5.0-beta.3 → 8.5.0-beta.5

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

@@ -9,6 +9,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
+    _memoCallbacksForGroups: {};
+    _memoGroupsProps: {};
+    _memoGroupsLayouts: {};
+    _memoForwardedPluginRef: any[];
     _timeout: any;
     _lastReloadAt: any;
     onVisibilityChange: () => void;
@@ -19,11 +23,22 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     }) => void;
     getItemsMeta: () => any;
     getActiveLayout(): any;
+    getMemoGroupLayout: (group: any, layout: any) => any;
+    getMemoGroupCallbacks: (group: any) => any;
+    getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
+        layout: any;
+        callbacks: any;
+    };
+    getLayoutAndPropsByGroup: (group: any) => {
+        properties: any;
+        layout: any;
+    };
+    getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (e: any, gridProperties: any, layout: any) => any;
+    _onDropDragOver: (group: any, e: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;

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

@@ -9,6 +9,10 @@ const ReactGridLayout_1 = require("./ReactGridLayout");
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
+        this._memoForwardedPluginRef = [];
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoCallbacksForGroups = {};
         this.onVisibilityChange = () => {
             this.setState({
                 isPageHidden: document.hidden,
@@ -30,6 +34,65 @@ class GridLayout extends react_1.default.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
+        this.getMemoGroupLayout = (group, layout) => {
+            // fastest possible way to match json
+            const key = JSON.stringify(layout);
+            if (this._memoGroupsLayouts[group]) {
+                if (this._memoGroupsLayouts[group].key === key) {
+                    return this._memoGroupsLayouts[group];
+                }
+                else {
+                    this._memoGroupsLayouts[group].key = key;
+                    this._memoGroupsLayouts[group].layout = layout;
+                }
+            }
+            else {
+                this._memoGroupsLayouts[group] = {
+                    key,
+                    layout,
+                };
+            }
+            return this._memoGroupsLayouts[group];
+        };
+        this.getMemoGroupCallbacks = (group) => {
+            if (!this._memoCallbacksForGroups[group]) {
+                const onStart = this._onStart;
+                const onStop = this._onStop.bind(this, group);
+                const onDrop = this._onDrop.bind(this, group);
+                const onDropDragOver = this._onDropDragOver.bind(this, group);
+                this._memoCallbacksForGroups[group] = {
+                    onDragStart: onStart,
+                    onResizeStart: onStart,
+                    onDragStop: onStop,
+                    onResizeStop: onStop,
+                    onDrop: onDrop,
+                    onDropDragOver,
+                };
+            }
+            return this._memoCallbacksForGroups[group];
+        };
+        this.getMemoGroupProps = (group, renderLayout, properties) => {
+            // Needed for _onDropDragOver
+            this._memoGroupsProps[group] = properties;
+            return {
+                layout: this.getMemoGroupLayout(group, renderLayout).layout,
+                callbacks: this.getMemoGroupCallbacks(group),
+            };
+        };
+        this.getLayoutAndPropsByGroup = (group) => {
+            return {
+                properties: this._memoGroupsProps[group],
+                layout: this._memoGroupsLayouts[group].layout,
+            };
+        };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this._onStart = () => {
             if (this.temporaryLayout)
                 return;
@@ -46,12 +109,13 @@ class GridLayout extends react_1.default.PureComponent {
             }
             this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (e, gridProperties, layout) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e, gridProperties, layout);
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            return this.context.onDropDragOver(e, properties, layout);
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -84,6 +148,10 @@ class GridLayout extends react_1.default.PureComponent {
     componentWillUnmount() {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this._memoCallbacksForGroups = {};
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoForwardedPluginRef = [];
     }
     getActiveLayout() {
         const { layout, temporaryLayout } = this.context;
@@ -140,19 +208,18 @@ class GridLayout extends react_1.default.PureComponent {
         if (compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
             compactType = 'horizontal';
         }
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: (e) => this._onDropDragOver(e, properties, renderLayout),
-                onDrop: (...args) => this._onDrop(group, ...args),
+                onDropDragOver: callbacks.onDropDragOver,
+                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[offset + i] = pluginRef;
-                    }, key: item.id, id: item.id, item: item, layout: renderLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                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), overlayControls: this.props.overlayControls }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -2,6 +2,8 @@ declare const _default: {
     new (props: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
@@ -26,6 +28,8 @@ declare const _default: {
     new (props: any, context: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;

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

@@ -2,6 +2,8 @@ export function prepareItem(Component: any): {
     new (props: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
@@ -26,6 +28,8 @@ export function prepareItem(Component: any): {
     new (props: any, context: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;

package/build/cjs/hocs/prepareItem.js

@@ -13,6 +13,35 @@ function prepareItem(Component) {
                 this._onStateAndParamsChange = (stateAndParams, options) => {
                     this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options);
                 };
+                this._currentRenderProps = {};
+                this.getRenderProps = () => {
+                    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 = {
+                        data,
+                        editMode,
+                        params: itemsParams[id],
+                        state: itemsState[id],
+                        onStateAndParamsChange: this._onStateAndParamsChange,
+                        width,
+                        height,
+                        id,
+                        defaults,
+                        namespace,
+                        settings,
+                        context,
+                        layout,
+                        gridLayout: registerManager.gridLayout,
+                        adjustWidgetLayout,
+                        isPlaceholder,
+                    };
+                    const changedProp = Object.entries(rendererProps).find(([key, value]) => this._currentRenderProps[key] !== value);
+                    if (changedProp) {
+                        this._currentRenderProps = rendererProps;
+                    }
+                    return this._currentRenderProps;
+                };
             }
             shouldComponentUpdate(nextProps) {
                 const { width, height, transform } = this.props;
@@ -26,28 +55,10 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
-                const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
-                const { type, data, defaults, namespace } = item;
-                const rendererProps = {
-                    data,
-                    editMode,
-                    params: itemsParams[id],
-                    state: itemsState[id],
-                    onStateAndParamsChange: this._onStateAndParamsChange,
-                    width,
-                    height,
-                    id,
-                    defaults,
-                    namespace,
-                    settings,
-                    context,
-                    layout,
-                    gridLayout: registerManager.gridLayout,
-                    adjustWidgetLayout,
-                    isPlaceholder,
-                };
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                const { item, isPlaceholder } = 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 }));
             }
         },
         _a.propTypes = {

package/build/cjs/hocs/withContext.js

@@ -7,6 +7,7 @@ const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
+const useDeepEqualMemo_1 = require("../hooks/useDeepEqualMemo");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
 const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'];
@@ -113,7 +114,9 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const horizontalNowrapLayoutAdjust = react_1.default.useCallback((groups, layout) => {
+    react_1.default.useMemo(() => {
+        const groups = props.groups;
+        const layout = props.layout;
         const defaultProps = props.registerManager._gridLayout || {};
         const nowrapGroups = {};
         let hasNowrapGroups = false;
@@ -142,39 +145,24 @@ function useMemoStateContext(props) {
                 const widgetId = item.i;
                 const parentId = item.parent || common_1.DEFAULT_GROUP;
                 if (nowrapGroups[parentId]) {
+                    // Collecting nowrap elements
                     nowrapGroups[parentId].items.push(item);
                     nowrapGroups[parentId].leftSpace -= item.w;
                 }
-                else if (nowrapAdjustedLayouts.current[item.i]) {
-                    const { originalMaxW } = nowrapAdjustedLayouts.current[widgetId];
-                    const adjustedItem = adjustedLayouts.current[widgetId];
-                    if (originalMaxW) {
-                        adjustedLayouts.current[widgetId] = Object.assign(Object.assign({}, adjustedItem), { maxW: originalMaxW });
-                        originalLayouts.current[widgetId] = item;
-                    }
-                    else {
-                        adjustedLayouts.current[widgetId] = Object.assign({}, adjustedItem);
-                        originalLayouts.current[widgetId] = item;
-                    }
+                else if (nowrapAdjustedLayouts.current[widgetId]) {
+                    // If element is not in horizontal-nowrap cleaning up and reverting adjustLayout values
                     delete nowrapAdjustedLayouts.current[widgetId];
                 }
             });
             Object.entries(nowrapGroups).forEach(([, { items, leftSpace }]) => {
                 items.forEach((item) => {
-                    const maxW = item.w + leftSpace;
-                    if (!adjustedLayouts[item.i] || adjustedLayouts[item.i].maxW > maxW) {
-                        originalLayouts.current[item.i] = item;
-                        adjustedLayouts.current[item.i] = Object.assign(Object.assign({}, item), { maxW });
-                        nowrapAdjustedLayouts.current[item.i] = item.maxW
-                            ? { maxW, originalMaxW: item.maxW }
-                            : { maxW };
-                    }
+                    // setting maxW with adjustLayout fields and saving previous
+                    nowrapAdjustedLayouts.current[item.i] = item.w + leftSpace;
                 });
             });
         }
-        return adjustedLayouts.current;
-    }, [props.registerManager]);
-    const itemsParams = react_1.default.useMemo(() => (0, shared_1.getItemsParams)({
+    }, [props.registerManager, props.groups, props.layout]);
+    const itemsParams = (0, useDeepEqualMemo_1.useDeepEqualMemo)(() => (0, shared_1.getItemsParams)({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -187,7 +175,7 @@ function useMemoStateContext(props) {
         props.itemsStateAndParams,
         props.registerManager,
     ]);
-    const itemsState = react_1.default.useMemo(() => (0, shared_1.getItemsState)({
+    const itemsState = (0, useDeepEqualMemo_1.useDeepEqualMemo)(() => (0, shared_1.getItemsState)({
         config: props.config,
         itemsStateAndParams: props.itemsStateAndParams,
     }), [props.config, props.itemsStateAndParams]);
@@ -202,24 +190,34 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = react_1.default.useMemo(() => {
-        const adjusted = horizontalNowrapLayoutAdjust(props.groups, props.layout);
+        const adjusted = adjustedLayouts.current;
+        const original = originalLayouts.current;
+        const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
-            if (item.i in adjusted) {
+            const widgetId = item.i;
+            if (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+                original[widgetId] = item;
                 // eslint-disable-next-line no-unused-vars
-                const _a = adjusted[item.i] || {}, { parent } = _a, adjustedItem = tslib_1.__rest(_a, ["parent"]);
+                const _a = adjusted[widgetId] || item, { parent } = _a, adjustedItem = tslib_1.__rest(_a, ["parent"]);
                 adjustedItem.w = item.w;
                 adjustedItem.x = item.x;
                 adjustedItem.y = item.y;
                 if (item.parent) {
                     adjustedItem.parent = item.parent;
                 }
+                if (nowrapAdjust[widgetId]) {
+                    adjustedItem.maxW = nowrapAdjust[widgetId];
+                }
                 return adjustedItem;
             }
             else {
+                if (original[widgetId]) {
+                    delete original[widgetId];
+                }
                 return item;
             }
         });
-    }, [props.layout, props.groups, horizontalNowrapLayoutAdjust, layoutUpdateCounter]);
+    }, [props.layout, layoutUpdateCounter]);
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDeepEqualMemo: <T extends unknown>(predicate: () => T, deps: React.DependencyList) => T;

package/build/cjs/hooks/useDeepEqualMemo.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepEqualMemo = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const useDeepEqualMemo = (predicate, deps) => {
+    const previousValueRef = react_1.default.useRef({});
+    const callbackRef = react_1.default.useRef(predicate);
+    callbackRef.current = predicate;
+    return react_1.default.useMemo(() => {
+        const value = predicate();
+        if (!(0, isEqual_1.default)(previousValueRef.current, value)) {
+            previousValueRef.current = value;
+        }
+        return previousValueRef.current;
+    }, [callbackRef, previousValueRef, ...deps]);
+};
+exports.useDeepEqualMemo = useDeepEqualMemo;

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

@@ -9,6 +9,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
+    _memoCallbacksForGroups: {};
+    _memoGroupsProps: {};
+    _memoGroupsLayouts: {};
+    _memoForwardedPluginRef: any[];
     _timeout: any;
     _lastReloadAt: any;
     onVisibilityChange: () => void;
@@ -19,11 +23,22 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     }) => void;
     getItemsMeta: () => any;
     getActiveLayout(): any;
+    getMemoGroupLayout: (group: any, layout: any) => any;
+    getMemoGroupCallbacks: (group: any) => any;
+    getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
+        layout: any;
+        callbacks: any;
+    };
+    getLayoutAndPropsByGroup: (group: any) => {
+        properties: any;
+        layout: any;
+    };
+    getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (e: any, gridProperties: any, layout: any) => any;
+    _onDropDragOver: (group: any, e: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;

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

@@ -6,6 +6,10 @@ import { Layout } from './ReactGridLayout';
 class GridLayout extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
+        this._memoForwardedPluginRef = [];
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoCallbacksForGroups = {};
         this.onVisibilityChange = () => {
             this.setState({
                 isPageHidden: document.hidden,
@@ -27,6 +31,65 @@ class GridLayout extends React.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
+        this.getMemoGroupLayout = (group, layout) => {
+            // fastest possible way to match json
+            const key = JSON.stringify(layout);
+            if (this._memoGroupsLayouts[group]) {
+                if (this._memoGroupsLayouts[group].key === key) {
+                    return this._memoGroupsLayouts[group];
+                }
+                else {
+                    this._memoGroupsLayouts[group].key = key;
+                    this._memoGroupsLayouts[group].layout = layout;
+                }
+            }
+            else {
+                this._memoGroupsLayouts[group] = {
+                    key,
+                    layout,
+                };
+            }
+            return this._memoGroupsLayouts[group];
+        };
+        this.getMemoGroupCallbacks = (group) => {
+            if (!this._memoCallbacksForGroups[group]) {
+                const onStart = this._onStart;
+                const onStop = this._onStop.bind(this, group);
+                const onDrop = this._onDrop.bind(this, group);
+                const onDropDragOver = this._onDropDragOver.bind(this, group);
+                this._memoCallbacksForGroups[group] = {
+                    onDragStart: onStart,
+                    onResizeStart: onStart,
+                    onDragStop: onStop,
+                    onResizeStop: onStop,
+                    onDrop: onDrop,
+                    onDropDragOver,
+                };
+            }
+            return this._memoCallbacksForGroups[group];
+        };
+        this.getMemoGroupProps = (group, renderLayout, properties) => {
+            // Needed for _onDropDragOver
+            this._memoGroupsProps[group] = properties;
+            return {
+                layout: this.getMemoGroupLayout(group, renderLayout).layout,
+                callbacks: this.getMemoGroupCallbacks(group),
+            };
+        };
+        this.getLayoutAndPropsByGroup = (group) => {
+            return {
+                properties: this._memoGroupsProps[group],
+                layout: this._memoGroupsLayouts[group].layout,
+            };
+        };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this._onStart = () => {
             if (this.temporaryLayout)
                 return;
@@ -43,12 +106,13 @@ class GridLayout extends React.PureComponent {
             }
             this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (e, gridProperties, layout) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e, gridProperties, layout);
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            return this.context.onDropDragOver(e, properties, layout);
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -81,6 +145,10 @@ class GridLayout extends React.PureComponent {
     componentWillUnmount() {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this._memoCallbacksForGroups = {};
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoForwardedPluginRef = [];
     }
     getActiveLayout() {
         const { layout, temporaryLayout } = this.context;
@@ -137,19 +205,18 @@ class GridLayout extends React.PureComponent {
         if (compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
             compactType = 'horizontal';
         }
-        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: (e) => this._onDropDragOver(e, properties, renderLayout),
-                onDrop: (...args) => this._onDrop(group, ...args),
+                onDropDragOver: callbacks.onDropDragOver,
+                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[offset + i] = pluginRef;
-                    }, key: item.id, id: item.id, item: item, layout: renderLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                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), overlayControls: this.props.overlayControls }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -2,6 +2,8 @@ declare const _default: {
     new (props: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
@@ -26,6 +28,8 @@ declare const _default: {
     new (props: any, context: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;

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

@@ -2,6 +2,8 @@ export function prepareItem(Component: any): {
     new (props: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
@@ -26,6 +28,8 @@ export function prepareItem(Component: any): {
     new (props: any, context: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;

package/build/esm/hocs/prepareItem.js

@@ -9,6 +9,35 @@ export function prepareItem(Component) {
                 this._onStateAndParamsChange = (stateAndParams, options) => {
                     this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options);
                 };
+                this._currentRenderProps = {};
+                this.getRenderProps = () => {
+                    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 = {
+                        data,
+                        editMode,
+                        params: itemsParams[id],
+                        state: itemsState[id],
+                        onStateAndParamsChange: this._onStateAndParamsChange,
+                        width,
+                        height,
+                        id,
+                        defaults,
+                        namespace,
+                        settings,
+                        context,
+                        layout,
+                        gridLayout: registerManager.gridLayout,
+                        adjustWidgetLayout,
+                        isPlaceholder,
+                    };
+                    const changedProp = Object.entries(rendererProps).find(([key, value]) => this._currentRenderProps[key] !== value);
+                    if (changedProp) {
+                        this._currentRenderProps = rendererProps;
+                    }
+                    return this._currentRenderProps;
+                };
             }
             shouldComponentUpdate(nextProps) {
                 const { width, height, transform } = this.props;
@@ -22,28 +51,10 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
-                const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
-                const { type, data, defaults, namespace } = item;
-                const rendererProps = {
-                    data,
-                    editMode,
-                    params: itemsParams[id],
-                    state: itemsState[id],
-                    onStateAndParamsChange: this._onStateAndParamsChange,
-                    width,
-                    height,
-                    id,
-                    defaults,
-                    namespace,
-                    settings,
-                    context,
-                    layout,
-                    gridLayout: registerManager.gridLayout,
-                    adjustWidgetLayout,
-                    isPlaceholder,
-                };
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                const { item, isPlaceholder } = 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 }));
             }
         },
         _a.propTypes = {

package/build/esm/hocs/withContext.js

@@ -4,6 +4,7 @@ import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common';
 import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
+import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
 const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'];
@@ -110,7 +111,9 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const horizontalNowrapLayoutAdjust = React.useCallback((groups, layout) => {
+    React.useMemo(() => {
+        const groups = props.groups;
+        const layout = props.layout;
         const defaultProps = props.registerManager._gridLayout || {};
         const nowrapGroups = {};
         let hasNowrapGroups = false;
@@ -139,39 +142,24 @@ function useMemoStateContext(props) {
                 const widgetId = item.i;
                 const parentId = item.parent || DEFAULT_GROUP;
                 if (nowrapGroups[parentId]) {
+                    // Collecting nowrap elements
                     nowrapGroups[parentId].items.push(item);
                     nowrapGroups[parentId].leftSpace -= item.w;
                 }
-                else if (nowrapAdjustedLayouts.current[item.i]) {
-                    const { originalMaxW } = nowrapAdjustedLayouts.current[widgetId];
-                    const adjustedItem = adjustedLayouts.current[widgetId];
-                    if (originalMaxW) {
-                        adjustedLayouts.current[widgetId] = Object.assign(Object.assign({}, adjustedItem), { maxW: originalMaxW });
-                        originalLayouts.current[widgetId] = item;
-                    }
-                    else {
-                        adjustedLayouts.current[widgetId] = Object.assign({}, adjustedItem);
-                        originalLayouts.current[widgetId] = item;
-                    }
+                else if (nowrapAdjustedLayouts.current[widgetId]) {
+                    // If element is not in horizontal-nowrap cleaning up and reverting adjustLayout values
                     delete nowrapAdjustedLayouts.current[widgetId];
                 }
             });
             Object.entries(nowrapGroups).forEach(([, { items, leftSpace }]) => {
                 items.forEach((item) => {
-                    const maxW = item.w + leftSpace;
-                    if (!adjustedLayouts[item.i] || adjustedLayouts[item.i].maxW > maxW) {
-                        originalLayouts.current[item.i] = item;
-                        adjustedLayouts.current[item.i] = Object.assign(Object.assign({}, item), { maxW });
-                        nowrapAdjustedLayouts.current[item.i] = item.maxW
-                            ? { maxW, originalMaxW: item.maxW }
-                            : { maxW };
-                    }
+                    // setting maxW with adjustLayout fields and saving previous
+                    nowrapAdjustedLayouts.current[item.i] = item.w + leftSpace;
                 });
             });
         }
-        return adjustedLayouts.current;
-    }, [props.registerManager]);
-    const itemsParams = React.useMemo(() => getItemsParams({
+    }, [props.registerManager, props.groups, props.layout]);
+    const itemsParams = useDeepEqualMemo(() => getItemsParams({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -184,7 +172,7 @@ function useMemoStateContext(props) {
         props.itemsStateAndParams,
         props.registerManager,
     ]);
-    const itemsState = React.useMemo(() => getItemsState({
+    const itemsState = useDeepEqualMemo(() => getItemsState({
         config: props.config,
         itemsStateAndParams: props.itemsStateAndParams,
     }), [props.config, props.itemsStateAndParams]);
@@ -199,24 +187,34 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = React.useMemo(() => {
-        const adjusted = horizontalNowrapLayoutAdjust(props.groups, props.layout);
+        const adjusted = adjustedLayouts.current;
+        const original = originalLayouts.current;
+        const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
-            if (item.i in adjusted) {
+            const widgetId = item.i;
+            if (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+                original[widgetId] = item;
                 // eslint-disable-next-line no-unused-vars
-                const _a = adjusted[item.i] || {}, { parent } = _a, adjustedItem = __rest(_a, ["parent"]);
+                const _a = adjusted[widgetId] || item, { parent } = _a, adjustedItem = __rest(_a, ["parent"]);
                 adjustedItem.w = item.w;
                 adjustedItem.x = item.x;
                 adjustedItem.y = item.y;
                 if (item.parent) {
                     adjustedItem.parent = item.parent;
                 }
+                if (nowrapAdjust[widgetId]) {
+                    adjustedItem.maxW = nowrapAdjust[widgetId];
+                }
                 return adjustedItem;
             }
             else {
+                if (original[widgetId]) {
+                    delete original[widgetId];
+                }
                 return item;
             }
         });
-    }, [props.layout, props.groups, horizontalNowrapLayoutAdjust, layoutUpdateCounter]);
+    }, [props.layout, layoutUpdateCounter]);
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDeepEqualMemo: <T extends unknown>(predicate: () => T, deps: React.DependencyList) => T;

package/build/esm/hooks/useDeepEqualMemo.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+export const useDeepEqualMemo = (predicate, deps) => {
+    const previousValueRef = React.useRef({});
+    const callbackRef = React.useRef(predicate);
+    callbackRef.current = predicate;
+    return React.useMemo(() => {
+        const value = predicate();
+        if (!isEqual(previousValueRef.current, value)) {
+            previousValueRef.current = value;
+        }
+        return previousValueRef.current;
+    }, [callbackRef, previousValueRef, ...deps]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.5.0-beta.3",
+  "version": "8.5.0-beta.5",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {