@gravity-ui/dashkit 8.5.0 → 8.6.0

package/README.md

@@ -475,6 +475,7 @@ const CustomThemeWrapper = (props: {
 By default, storybook runs on `http://localhost:7120/`.
 New changes from a project aren't always picked up when storybook is running, so it's better to rebuild a project manually and restart storybook.
 
+
 ### Example of an nginx config for development on a dev machine
 
 ```bash

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) => 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) => {
-            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) {
@@ -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;
@@ -136,19 +204,22 @@ class GridLayout extends react_1.default.PureComponent {
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
-        return (react_1.default.createElement(ReactGridLayout_1.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 === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            compactType = 'horizontal';
+        }
+        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: this._onDropDragOver,
-                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/constants/common.d.ts

@@ -11,3 +11,4 @@ export declare const MenuItems: {
 export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
+export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -14,3 +14,4 @@ exports.MenuItems = {
 exports.DEFAULT_WIDGET_HEIGHT = 3;
 exports.DEFAULT_WIDGET_WIDTH = 3;
 exports.DEFAULT_GROUP = '__default';
+exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

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,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 +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]);
@@ -134,12 +190,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 (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+                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 (nowrapAdjust[widgetId]) {
+                    adjustedItem.maxW = nowrapAdjust[widgetId];
+                }
+                return adjustedItem;
             }
             else {
-                return Object.assign({}, item);
+                if (original[widgetId]) {
+                    delete original[widgetId];
+                }
+                return item;
             }
         });
     }, [props.layout, layoutUpdateCounter]);
@@ -161,17 +236,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,11 +274,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,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/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;
@@ -133,19 +201,22 @@ class GridLayout extends React.PureComponent {
         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), 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/constants/common.d.ts

@@ -11,3 +11,4 @@ export declare const MenuItems: {
 export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
 export declare const DEFAULT_GROUP = "__default";
+export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";

package/build/esm/constants/common.js

@@ -11,3 +11,4 @@ export const MenuItems = {
 export const DEFAULT_WIDGET_HEIGHT = 3;
 export const DEFAULT_WIDGET_WIDTH = 3;
 export const DEFAULT_GROUP = '__default';
+export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

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

@@ -1,10 +1,13 @@
+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) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -13,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);
@@ -48,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();
         }
@@ -102,7 +111,55 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const itemsParams = React.useMemo(() => getItemsParams({
+    React.useMemo(() => {
+        const groups = props.groups;
+        const layout = props.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]) {
+                    // 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 = useDeepEqualMemo(() => getItemsParams({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -115,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]);
@@ -130,12 +187,31 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = React.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 (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+                original[widgetId] = item;
+                // eslint-disable-next-line no-unused-vars
+                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 {
-                return Object.assign({}, item);
+                if (original[widgetId]) {
+                    delete original[widgetId];
+                }
+                return item;
             }
         });
     }, [props.layout, layoutUpdateCounter]);
@@ -157,17 +233,31 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback(() => {
+    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, 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) => {
@@ -181,11 +271,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,12 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+export const useDeepEqualMemo = (predicate, deps) => {
+    const previousValueRef = React.useRef({});
+    return React.useMemo(() => {
+        const value = predicate();
+        if (!isEqual(previousValueRef.current, value)) {
+            previousValueRef.current = value;
+        }
+        return previousValueRef.current;
+    }, [previousValueRef, ...deps]);
+};

package/build/esm/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/package.json

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