@gravity-ui/dashkit 8.5.0 → 8.7.0

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);
@@ -51,7 +54,13 @@ function useMemoStateContext(props) {
             onChange({ config: newConfig });
         }
     }, [props.config, onChange]);
+    const getLayoutItem = react_1.default.useCallback((id) => {
+        return props.config.layout.find(({ i }) => i === id);
+    }, [props.config.layout]);
     const onItemRemove = react_1.default.useCallback((id) => {
+        delete nowrapAdjustedLayouts.current[id];
+        delete adjustedLayouts.current[id];
+        delete originalLayouts.current[id];
         if (id === common_1.TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -106,7 +115,55 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const itemsParams = react_1.default.useMemo(() => (0, shared_1.getItemsParams)({
+    react_1.default.useMemo(() => {
+        const groups = props.groups;
+        const layout = props.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]) {
+                    // Collecting nowrap elements
+                    nowrapGroups[parentId].items.push(item);
+                    nowrapGroups[parentId].leftSpace -= item.w;
+                }
+                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) => {
+                    // setting maxW with adjustLayout fields and saving previous
+                    nowrapAdjustedLayouts.current[item.i] = item.w + leftSpace;
+                });
+            });
+        }
+    }, [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,
@@ -119,7 +176,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,12 +191,31 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = react_1.default.useMemo(() => {
+        const adjusted = adjustedLayouts.current;
+        const original = originalLayouts.current;
+        const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
-            if (item.i in adjustedLayouts.current) {
-                return Object.assign(Object.assign({}, adjustedLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            const widgetId = item.i;
+            if (widgetId in adjusted || widgetId in nowrapAdjust) {
+                original[widgetId] = item;
+                // eslint-disable-next-line no-unused-vars
+                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 (widgetId in nowrapAdjust) {
+                    adjustedItem.maxW = nowrapAdjust[widgetId];
+                }
+                return adjustedItem;
             }
             else {
-                return Object.assign({}, item);
+                if (widgetId in original) {
+                    delete original[widgetId];
+                }
+                return item;
             }
         });
     }, [props.layout, layoutUpdateCounter]);
@@ -161,17 +237,31 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = react_1.default.useCallback(() => {
+    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, 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) => {
@@ -185,16 +275,16 @@ 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,
         });
     }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
-    return react_1.default.useMemo(() => ({
+    const dashkitContextValue = react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
@@ -210,10 +300,8 @@ function useMemoStateContext(props) {
         itemsParams,
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
-        removeItem: onItemRemove,
         onDrop,
         onDropDragOver,
-        editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -238,10 +326,8 @@ function useMemoStateContext(props) {
         itemsParams,
         props.registerManager,
         onItemStateAndParamsChange,
-        onItemRemove,
         onDrop,
         onDropDragOver,
-        props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -252,12 +338,34 @@ function useMemoStateContext(props) {
         outerDnDEnable,
         dragOverPlugin,
     ]);
+    const overlayMenuItems = props.overlayMenuItems || props.registerManager.settings.menu;
+    const controlsContextValue = react_1.default.useMemo(() => ({
+        overlayControls: props.overlayControls,
+        context: props.context,
+        menu: overlayMenuItems,
+        itemsParams: itemsParams,
+        itemsState: itemsState,
+        editItem: props.onItemEdit,
+        removeItem: onItemRemove,
+        getLayoutItem: getLayoutItem,
+    }), [
+        itemsParams,
+        itemsState,
+        props.context,
+        props.onItemEdit,
+        onItemRemove,
+        props.overlayControls,
+        overlayMenuItems,
+        getLayoutItem,
+    ]);
+    return { controlsContextValue, dashkitContextValue };
 }
 function withContext(Component) {
     const WithContext = (props) => {
-        const contextValue = useMemoStateContext(props);
-        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
-            react_1.default.createElement(Component, { overlayControls: props.overlayControls })));
+        const { dashkitContextValue, controlsContextValue } = useMemoStateContext(props);
+        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: dashkitContextValue },
+            react_1.default.createElement(DashKitContext_1.DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
+                react_1.default.createElement(Component, null))));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

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,17 @@
+"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({});
+    return react_1.default.useMemo(() => {
+        const value = predicate();
+        if (!(0, isEqual_1.default)(previousValueRef.current, value)) {
+            previousValueRef.current = value;
+        }
+        return previousValueRef.current;
+    }, [previousValueRef, ...deps]);
+};
+exports.useDeepEqualMemo = useDeepEqualMemo;

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

@@ -19,7 +19,9 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
-export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'>;
+export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
+    compactType?: ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+};
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { ContextProps, DashKitGroup, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import { ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;
-    overlayControls?: Record<string, OverlayControlItem[]>;
+    overlayControls?: Record<string, OverlayControlItem[]> | null;
+    overlayMenuItems?: MenuItem[] | null;
 }
 interface DashKitDefaultProps {
     onItemEdit: (item: ConfigItem) => void;

package/build/esm/components/DashKitView/DashKitView.js

@@ -7,10 +7,10 @@ import GridLayout from '../GridLayout/GridLayout';
 import MobileLayout from '../MobileLayout/MobileLayout';
 import './DashKitView.css';
 const b = cn('dashkit');
-function DashKitView(props) {
+function DashKitView() {
     const context = React.useContext(DashKitContext);
     const { registerManager, forwardedMetaRef } = context;
-    return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef, overlayControls: props.overlayControls }))));
+    return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef }))));
 }
 const DashKitViewWithContext = withContext(DashKitView);
 const DashKitViewForwardedMeta = React.forwardRef((props, ref) => {

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

@@ -56,16 +56,15 @@ class GridItem extends React.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls, isPlaceholder } = this.props;
+        const { isPlaceholder } = this.props;
         const { editMode } = this.context;
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;
-        const controls = overlayControls && overlayControls[item.type];
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: b('overlay') }),
-            React.createElement(OverlayControls, { configItem: item, items: controls, overlayControls: overlayControls })));
+            React.createElement(OverlayControls, { configItem: item })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -106,7 +105,6 @@ GridItem.propTypes = {
     item: PropTypes.object,
     isDragging: PropTypes.bool,
     layout: PropTypes.array,
-    overlayControls: PropTypes.object,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
     isPlaceholder: PropTypes.bool,

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) => 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

@@ -1,11 +1,15 @@
 import React from 'react';
-import { DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
+import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridItem from '../GridItem/GridItem';
 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) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e);
+            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;
@@ -126,26 +194,29 @@ class GridLayout extends React.PureComponent {
         }
         const id = TEMPORARY_ITEM_ID;
         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 }));
+        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
-        return (React.createElement(Layout, Object.assign({}, properties, { 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
+        let { compactType } = properties;
+        if (compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            compactType = 'horizontal';
+        }
+        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: this._onDropDragOver,
-                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) }));
             }),
             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;