@gravity-ui/dashkit 8.5.0-beta.2 → 8.5.0-beta.4

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,15 +23,24 @@ 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;
-    caclculateEmptyHorizontalSpace(layout: any, cols: any): any;
-    getElementLayout(layout: any, properties: any): any;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }

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,20 +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;
             }
-            let maxW = gridProperties.cols;
-            const maxH = gridProperties.maxRows;
-            if (gridProperties.compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
-                maxW = this.caclculateEmptyHorizontalSpace(layout, gridProperties.cols);
-            }
-            if (maxW === 0 || maxH === 0) {
-                return false;
-            }
-            return onDropDragOver(e, { maxH, maxW });
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            return this.context.onDropDragOver(e, properties, layout);
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -92,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;
@@ -139,17 +199,6 @@ class GridLayout extends react_1.default.PureComponent {
         const { type } = temporaryLayout.dragProps;
         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), overlayControls: this.props.overlayControls }));
     }
-    caclculateEmptyHorizontalSpace(layout, cols) {
-        return layout.reduce((memo, item) => memo - item.w, cols);
-    }
-    getElementLayout(layout, properties) {
-        let maxH;
-        if (properties.maxRows) {
-            maxH = properties.maxRows;
-        }
-        const leftSpace = this.caclculateEmptyHorizontalSpace(layout, properties.cols);
-        return layout.map((item) => (Object.assign(Object.assign({}, item), { maxW: item.w + leftSpace, maxH })));
-    }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         const properties = groupGridProperties
@@ -157,22 +206,20 @@ class GridLayout extends react_1.default.PureComponent {
             : registerManager.gridLayout;
         let { compactType } = properties;
         if (compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
-            renderLayout = this.getElementLayout(renderLayout, properties);
             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,8 +7,10 @@ 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'];
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -17,6 +19,7 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = react_1.default.useRef({});
     const adjustedLayouts = react_1.default.useRef({});
+    const nowrapAdjustedLayouts = react_1.default.useRef({});
     const [temporaryLayout, setTemporaryLayout] = react_1.default.useState(null);
     const resetTemporaryLayout = react_1.default.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
     const dndContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
@@ -52,6 +55,11 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = react_1.default.useCallback((id) => {
+        if (nowrapAdjustedLayouts.current[id]) {
+            delete nowrapAdjustedLayouts.current[id];
+            delete adjustedLayouts.current[id];
+            delete originalLayouts.current[id];
+        }
         if (id === common_1.TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -106,7 +114,76 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const itemsParams = react_1.default.useMemo(() => (0, shared_1.getItemsParams)({
+    const horizontalNowrapLayoutAdjust = react_1.default.useCallback((groups, layout) => {
+        const defaultProps = props.registerManager._gridLayout || {};
+        const nowrapGroups = {};
+        let hasNowrapGroups = false;
+        if (defaultProps.compactType === common_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            nowrapGroups[common_1.DEFAULT_GROUP] = {
+                items: [],
+                leftSpace: defaultProps.cols,
+            };
+            hasNowrapGroups = true;
+        }
+        if (groups) {
+            groups.forEach((group) => {
+                var _a;
+                const resultProps = ((_a = group.gridProperties) === null || _a === void 0 ? void 0 : _a.call(group, defaultProps)) || {};
+                if (resultProps.compactType === common_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+                    nowrapGroups[group.id] = {
+                        items: [],
+                        leftSpace: resultProps.cols,
+                    };
+                    hasNowrapGroups = true;
+                }
+            });
+        }
+        if (hasNowrapGroups) {
+            layout.forEach((item) => {
+                const widgetId = item.i;
+                const parentId = item.parent || common_1.DEFAULT_GROUP;
+                if (nowrapGroups[parentId]) {
+                    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);
+                    }
+                    delete nowrapAdjustedLayouts.current[widgetId];
+                }
+                originalLayouts.current[widgetId] = item;
+            });
+            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 };
+                    }
+                });
+            });
+        }
+        else if (groups) {
+            layout.forEach((item) => {
+                const widgetId = item.i;
+                if (adjustedLayouts.current[widgetId]) {
+                    originalLayouts.current[widgetId] = item;
+                }
+            });
+        }
+        return adjustedLayouts.current;
+    }, [props.registerManager]);
+    const itemsParams = (0, useDeepEqualMemo_1.useDeepEqualMemo)(() => (0, shared_1.getItemsParams)({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -119,7 +196,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]);
@@ -134,27 +211,24 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = react_1.default.useMemo(() => {
+        const adjusted = horizontalNowrapLayoutAdjust(props.groups, props.layout);
         return props.layout.map((item) => {
-            if (item.i in adjustedLayouts.current) {
+            if (item.i in adjusted) {
                 // eslint-disable-next-line no-unused-vars
-                const _a = adjustedLayouts.current[item.i] || {}, { parent } = _a, adjustedItem = tslib_1.__rest(_a, ["parent"]);
+                const _a = adjusted[item.i] || {}, { 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;
                 }
-                // update originalLayouts memoized item
-                if (originalLayouts.current[item.i]) {
-                    originalLayouts.current[item.i] = item;
-                }
                 return adjustedItem;
             }
             else {
-                return Object.assign({}, item);
+                return item;
             }
         });
-    }, [props.layout, layoutUpdateCounter]);
+    }, [props.layout, props.groups, horizontalNowrapLayoutAdjust, layoutUpdateCounter]);
     const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
@@ -173,20 +247,31 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = react_1.default.useCallback((_e, gridProps = {}) => {
+    const onDropDragOver = react_1.default.useCallback((_e, gridProps, groupLayout) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin) {
-            const { defaultLayout } = dragOverPlugin;
-            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
-            return {
-                h: gridProps.maxH ? Math.min(h, gridProps.maxH) : h,
-                w: gridProps.maxW ? Math.min(w, gridProps.maxW) : w,
-            };
+        if (!dragOverPlugin) {
+            return false;
+        }
+        let maxW = gridProps.cols;
+        const { defaultLayout } = dragOverPlugin;
+        const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
+        if (gridProps.compactType === common_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
+        }
+        if (maxW === 0 ||
+            maxH === 0 ||
+            maxW < defaultLayout.minW ||
+            maxH < defaultLayout.minH) {
+            return false;
         }
-        return false;
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || common_1.DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || common_1.DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        return {
+            h: maxH ? Math.min(h, maxH) : h,
+            w: maxW ? Math.min(w, maxW) : w,
+        };
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
     const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
@@ -200,11 +285,11 @@ function useMemoStateContext(props) {
         onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== item.i) {
-                    memo.push((0, pick_1.default)(l, ['i', 'h', 'w', 'x', 'y', 'parent']));
+                    memo.push((0, pick_1.default)(l, ITEM_PROPS));
                 }
                 return memo;
             }, []),
-            itemLayout: (0, pick_1.default)(item, ['i', 'h', 'w', 'x', 'y', 'parent']),
+            itemLayout: (0, pick_1.default)(item, ITEM_PROPS),
             commit: resetTemporaryLayout,
             dragProps,
         });

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,15 +23,24 @@ 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;
-    caclculateEmptyHorizontalSpace(layout: any, cols: any): any;
-    getElementLayout(layout: any, properties: any): any;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;
 }

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,20 +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;
             }
-            let maxW = gridProperties.cols;
-            const maxH = gridProperties.maxRows;
-            if (gridProperties.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
-                maxW = this.caclculateEmptyHorizontalSpace(layout, gridProperties.cols);
-            }
-            if (maxW === 0 || maxH === 0) {
-                return false;
-            }
-            return onDropDragOver(e, { maxH, maxW });
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            return this.context.onDropDragOver(e, properties, layout);
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -89,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;
@@ -136,17 +196,6 @@ class GridLayout extends React.PureComponent {
         const { type } = temporaryLayout.dragProps;
         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), overlayControls: this.props.overlayControls }));
     }
-    caclculateEmptyHorizontalSpace(layout, cols) {
-        return layout.reduce((memo, item) => memo - item.w, cols);
-    }
-    getElementLayout(layout, properties) {
-        let maxH;
-        if (properties.maxRows) {
-            maxH = properties.maxRows;
-        }
-        const leftSpace = this.caclculateEmptyHorizontalSpace(layout, properties.cols);
-        return layout.map((item) => (Object.assign(Object.assign({}, item), { maxW: item.w + leftSpace, maxH })));
-    }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         const properties = groupGridProperties
@@ -154,22 +203,20 @@ class GridLayout extends React.PureComponent {
             : registerManager.gridLayout;
         let { compactType } = properties;
         if (compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
-            renderLayout = this.getElementLayout(renderLayout, properties);
             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

@@ -2,10 +2,12 @@ import { __rest } from "tslib";
 import React from 'react';
 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
-import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID } from '../constants/common';
+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'];
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -14,6 +16,7 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
+    const nowrapAdjustedLayouts = React.useRef({});
     const [temporaryLayout, setTemporaryLayout] = React.useState(null);
     const resetTemporaryLayout = React.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
     const dndContext = React.useContext(DashKitDnDContext);
@@ -49,6 +52,11 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = React.useCallback((id) => {
+        if (nowrapAdjustedLayouts.current[id]) {
+            delete nowrapAdjustedLayouts.current[id];
+            delete adjustedLayouts.current[id];
+            delete originalLayouts.current[id];
+        }
         if (id === TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -103,7 +111,76 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const itemsParams = React.useMemo(() => getItemsParams({
+    const horizontalNowrapLayoutAdjust = React.useCallback((groups, layout) => {
+        const defaultProps = props.registerManager._gridLayout || {};
+        const nowrapGroups = {};
+        let hasNowrapGroups = false;
+        if (defaultProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            nowrapGroups[DEFAULT_GROUP] = {
+                items: [],
+                leftSpace: defaultProps.cols,
+            };
+            hasNowrapGroups = true;
+        }
+        if (groups) {
+            groups.forEach((group) => {
+                var _a;
+                const resultProps = ((_a = group.gridProperties) === null || _a === void 0 ? void 0 : _a.call(group, defaultProps)) || {};
+                if (resultProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+                    nowrapGroups[group.id] = {
+                        items: [],
+                        leftSpace: resultProps.cols,
+                    };
+                    hasNowrapGroups = true;
+                }
+            });
+        }
+        if (hasNowrapGroups) {
+            layout.forEach((item) => {
+                const widgetId = item.i;
+                const parentId = item.parent || DEFAULT_GROUP;
+                if (nowrapGroups[parentId]) {
+                    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);
+                    }
+                    delete nowrapAdjustedLayouts.current[widgetId];
+                }
+                originalLayouts.current[widgetId] = item;
+            });
+            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 };
+                    }
+                });
+            });
+        }
+        else if (groups) {
+            layout.forEach((item) => {
+                const widgetId = item.i;
+                if (adjustedLayouts.current[widgetId]) {
+                    originalLayouts.current[widgetId] = item;
+                }
+            });
+        }
+        return adjustedLayouts.current;
+    }, [props.registerManager]);
+    const itemsParams = useDeepEqualMemo(() => getItemsParams({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -116,7 +193,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]);
@@ -131,27 +208,24 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = React.useMemo(() => {
+        const adjusted = horizontalNowrapLayoutAdjust(props.groups, props.layout);
         return props.layout.map((item) => {
-            if (item.i in adjustedLayouts.current) {
+            if (item.i in adjusted) {
                 // eslint-disable-next-line no-unused-vars
-                const _a = adjustedLayouts.current[item.i] || {}, { parent } = _a, adjustedItem = __rest(_a, ["parent"]);
+                const _a = adjusted[item.i] || {}, { 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;
                 }
-                // update originalLayouts memoized item
-                if (originalLayouts.current[item.i]) {
-                    originalLayouts.current[item.i] = item;
-                }
                 return adjustedItem;
             }
             else {
-                return Object.assign({}, item);
+                return item;
             }
         });
-    }, [props.layout, layoutUpdateCounter]);
+    }, [props.layout, props.groups, horizontalNowrapLayoutAdjust, layoutUpdateCounter]);
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
@@ -170,20 +244,31 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback((_e, gridProps = {}) => {
+    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin) {
-            const { defaultLayout } = dragOverPlugin;
-            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
-            return {
-                h: gridProps.maxH ? Math.min(h, gridProps.maxH) : h,
-                w: gridProps.maxW ? Math.min(w, gridProps.maxW) : w,
-            };
+        if (!dragOverPlugin) {
+            return false;
+        }
+        let maxW = gridProps.cols;
+        const { defaultLayout } = dragOverPlugin;
+        const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
+        if (gridProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
+        }
+        if (maxW === 0 ||
+            maxH === 0 ||
+            maxW < defaultLayout.minW ||
+            maxH < defaultLayout.minH) {
+            return false;
         }
-        return false;
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        return {
+            h: maxH ? Math.min(h, maxH) : h,
+            w: maxW ? Math.min(w, maxW) : w,
+        };
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
     const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
@@ -197,11 +282,11 @@ function useMemoStateContext(props) {
         onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== item.i) {
-                    memo.push(pick(l, ['i', 'h', 'w', 'x', 'y', 'parent']));
+                    memo.push(pick(l, ITEM_PROPS));
                 }
                 return memo;
             }, []),
-            itemLayout: pick(item, ['i', 'h', 'w', 'x', 'y', 'parent']),
+            itemLayout: pick(item, ITEM_PROPS),
             commit: resetTemporaryLayout,
             dragProps,
         });

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.2",
+  "version": "8.5.0-beta.4",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {