@gravity-ui/dashkit 8.8.1 → 8.9.1

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

@@ -53,17 +53,18 @@ class GridLayout extends React.PureComponent {
         };
         this.getMemoGroupCallbacks = (group) => {
             if (!this._memoCallbacksForGroups[group]) {
-                const onStart = this._onStart;
+                const onDragStart = this._onDragStart.bind(this, group);
                 const onStop = this._onStop.bind(this, group);
                 const onDrop = this._onDrop.bind(this, group);
                 const onDropDragOver = this._onDropDragOver.bind(this, group);
+                const onDragTargetRestore = this._onTargetRestore.bind(this, group);
                 this._memoCallbacksForGroups[group] = {
-                    onDragStart: onStart,
-                    onResizeStart: onStart,
+                    onDragStart,
                     onDragStop: onStop,
                     onResizeStop: onStop,
-                    onDrop: onDrop,
+                    onDrop,
                     onDropDragOver,
+                    onDragTargetRestore,
                 };
             }
             return this._memoCallbacksForGroups[group];
@@ -90,48 +91,131 @@ class GridLayout extends React.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onStart = () => {
+        this._onDragStart = (group, _newLayout, layoutItem) => {
             if (this.temporaryLayout)
                 return;
-            this.setState({ isDragging: true });
+            if (this.context.dragOverPlugin) {
+                this.setState({ isDragging: true });
+            }
+            else {
+                let currentDraggingElement = this.state.currentDraggingElement;
+                if (!currentDraggingElement) {
+                    const _id = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === _id);
+                    currentDraggingElement = [group, layoutItem, item];
+                }
+                this.setState({
+                    isDragging: true,
+                    currentDraggingElement,
+                    draggedOverGroup: group,
+                });
+            }
+        };
+        this._onResizeStart = () => {
+            this.setState({
+                isDragging: true,
+            });
+        };
+        this._onTargetRestore = () => {
+            const { currentDraggingElement } = this.state;
+            if (currentDraggingElement) {
+                this.setState({
+                    draggedOverGroup: currentDraggingElement[0],
+                });
+            }
         };
         this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement &&
+                draggedOverGroup !== null &&
+                draggedOverGroup !== currentDraggingElement[0]) {
+                // Skipping layout update when change event called for source grid
+                // and waiting _onDrop
+                return;
+            }
             const groupedLayout = this.mergeGroupsLayout(group, newLayout);
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
             if (temporaryLayout) {
                 onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === TEMPORARY_ITEM_ID));
             }
             else {
                 layoutChange(groupedLayout);
             }
-            this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (group, e) => {
-            const { editMode, dragOverPlugin } = this.context;
-            if (!editMode || !dragOverPlugin) {
-                return false;
+        this._onSharedDrop = (targetGroup, newLayout, tempItem) => {
+            const { currentDraggingElement } = this.state;
+            const { layoutChange } = this.context;
+            if (!currentDraggingElement) {
+                return;
             }
-            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
-            return this.context.onDropDragOver(e, properties, layout);
+            const [, sourceItem] = currentDraggingElement;
+            const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
+                if (item.i === sourceItem.i) {
+                    const copy = Object.assign({}, tempItem);
+                    delete copy.parent;
+                    if (targetGroup !== DEFAULT_GROUP) {
+                        copy.parent = targetGroup;
+                    }
+                    copy.i = sourceItem.i;
+                    return copy;
+                }
+                return item;
+            });
+            this.setState({
+                isDragging: false,
+                currentDraggingElement: null,
+                draggedOverGroup: null,
+            });
+            layoutChange(groupedLayout);
+        };
+        this._onExternalDrop = (group, newLayout, item, e) => {
+            const { onDrop } = this.context;
+            if (group !== DEFAULT_GROUP) {
+                item.parent = group;
+            }
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
+            this.setState({ isDragging: false });
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
         };
         this._onDrop = (group, newLayout, item, e) => {
-            if (!item) {
+            if (!item || !this.context.editMode) {
                 return false;
             }
-            const { editMode, onDrop } = this.context;
-            if (!editMode) {
+            const { draggedOverGroup, currentDraggingElement } = this.state;
+            if (currentDraggingElement && draggedOverGroup === group) {
+                this._onSharedDrop(group, newLayout, item);
+            }
+            else {
+                this._onExternalDrop(group, newLayout, item, e);
+            }
+        };
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+            const { currentDraggingElement } = this.state;
+            if (!editMode || (!dragOverPlugin && !currentDraggingElement)) {
                 return false;
             }
-            if (group !== DEFAULT_GROUP) {
-                item.parent = group;
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            if (currentDraggingElement) {
+                const [, { h, w, i }, { type }] = currentDraggingElement;
+                return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
-            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
+            if (dragOverPlugin) {
+                return onDropDragOver(e, properties, layout);
+            }
+            return false;
         };
         this.pluginsRefs = [];
         this.state = {
             isDragging: false,
             isPageHidden: false,
+            currentDraggingElement: null,
+            draggedOverGroup: null,
         };
     }
     componentDidMount() {
@@ -201,6 +285,7 @@ class GridLayout extends React.PureComponent {
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        const { currentDraggingElement, draggedOverGroup } = this.state;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
@@ -209,13 +294,16 @@ class GridLayout extends React.PureComponent {
             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
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        const isDragCaptured = currentDraggingElement &&
+            group === currentDraggingElement[0] &&
+            draggedOverGroup !== null &&
+            draggedOverGroup !== group;
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: callbacks.onDropDragOver,
-                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {

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

@@ -1,62 +1,180 @@
 import React from 'react';
-import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
+import ReactGridLayout, { WidthProvider, utils } from 'react-grid-layout';
 import { OVERLAY_CLASS_NAME } from '../../constants';
 class DragOverLayout extends ReactGridLayout {
     constructor(...args) {
         super(...args);
-        this.dragReset = () => {
+        this._savedDraggedOutLayout = null;
+        // Reset placeholder when item dragged from outside
+        this.resetExternalPlaceholder = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        // Hide placeholder when element is dragged out
+        this.hideLocalPlaceholder = (i) => {
+            const { layout } = this.state;
+            const { cols } = this.props;
+            const savedLayout = layout.map((item) => (Object.assign({}, item)));
+            let hiddenElement;
+            const newLayout = utils.compact(layout.filter((item) => {
+                if (item.i === i) {
+                    hiddenElement = item;
+                    return false;
+                }
+                return true;
+            }), utils.compactType(this.props), cols);
+            if (hiddenElement) {
+                newLayout.push(hiddenElement);
+            }
+            this.setState({
+                activeDrag: null,
+                layout: newLayout,
+            });
+            return savedLayout;
+        };
+        this.extendedOnDrag = (i, x, y, sintEv) => {
+            if (this.props.isDragCaptured) {
+                if (!this._savedDraggedOutLayout) {
+                    this._savedDraggedOutLayout = this.hideLocalPlaceholder(i);
+                }
+                return;
+            }
+            this._savedDraggedOutLayout = null;
+            // parent onDrag will show new placeholder again
+            this.parentOnDrag(i, x, y, sintEv);
+        };
+        this.extendedOnDragStop = (i, x, y, sintEv) => {
+            // Restoring layout if item was dropped outside of the grid
+            if (this._savedDraggedOutLayout) {
+                const savedLayout = this._savedDraggedOutLayout;
+                const l = utils.getLayoutItem(savedLayout, i);
+                // Create placeholder (display only)
+                const placeholder = {
+                    w: l.w,
+                    h: l.h,
+                    x: l.x,
+                    y: l.y,
+                    placeholder: true,
+                    i: i,
+                };
+                this.setState({
+                    layout: savedLayout,
+                    activeDrag: placeholder,
+                }, () => {
+                    this.parentOnDragStop(i, x, y, sintEv);
+                });
+                this._savedDraggedOutLayout = null;
+            }
+            else {
+                this.parentOnDragStop(i, x, y, sintEv);
+            }
+        };
+        // Proxy mouse events -> drag methods for dnd between groups
+        this.mouseEnterHandler = (e) => {
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                this.onDragEnter(e);
+            }
+            else if (this.props.isDragCaptured) {
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        };
         this.mouseLeaveHandler = (e) => {
-            var _a;
-            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
-            if (rect.bottom <= e.clientY ||
-                rect.top >= e.clientY ||
-                rect.left >= e.clientX ||
-                rect.right <= e.clientX) {
-                this.dragReset();
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                this.onDragLeave(e);
+                (_b = (_a = this.props).onDragTargetRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         };
-        this.parentOnDrag = this.onDrag;
-        this.onDrag = (i, x, y, sintE) => {
-            this.parentOnDrag(i, x, y, sintE);
-            this.mouseLeaveHandler(sintE.e);
+        this.mouseMoveHandler = (e) => {
+            if (this.props.hasSharedDragItem) {
+                this.onDragOver(e);
+            }
         };
+        this.mouseUpHandler = (e) => {
+            var _a, _b;
+            if (this.props.hasSharedDragItem) {
+                e.preventDefault();
+                const { droppingItem } = this.props;
+                const { layout } = this.state;
+                const item = layout.find((l) => l.i === droppingItem.i);
+                // reset dragEnter counter on drop
+                this.resetExternalPlaceholder();
+                (_b = (_a = this.props).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, layout, item, e);
+            }
+        };
+        this.parentOnDrag = this.onDrag;
+        this.onDrag = this.extendedOnDrag;
+        this.parentOnDragStop = this.onDragStop;
+        this.onDragStop = this.extendedOnDragStop;
     }
     componentDidMount() {
         var _a;
         (_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
-        window.addEventListener('dragend', this.dragReset);
+        // If cursor is moved out of the window there is a bug
+        // which leaves placeholder element in grid, this action needed to reset this state
+        window.addEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.addEventListener('mouseup', this.mouseUpHandler);
+            innerElement.addEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.addEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.addEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
     componentWillUnmount() {
-        window.removeEventListener('dragend', this.dragReset);
+        window.removeEventListener('dragend', this.resetExternalPlaceholder);
+        const innerElement = this.getInnerElement();
+        if (innerElement) {
+            innerElement.removeEventListener('mouseup', this.mouseUpHandler);
+            innerElement.removeEventListener('mouseenter', this.mouseEnterHandler);
+            innerElement.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            innerElement.removeEventListener('mousemove', this.mouseMoveHandler);
+        }
     }
+    // react-grid-layout doens't calculate it's height when last element is removed
+    // and just keeps the previous value
+    // so for autosize to work in that case we are resetting it's height value
     containerHeight() {
         if (this.props.autoSize && this.state.layout.length === 0) {
-            return 'unset';
+            return;
         }
+        // eslint-disable-next-line consistent-return
         return super.containerHeight();
     }
+    // innerRef is passed by WithProvider without this wrapper there are only
+    // * findDOMNode - deprecated
+    // * rewrite whole ReactGridLayout.render method
+    // so in that case don't try to use this class on it's own
+    // or pass innerRef: React.MutableRef as it's not optional prop
+    getInnerElement() {
+        var _a;
+        return ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current) || null;
+    }
+    // Drop item from outside gets 0,0 droppingPosition
+    // centering cursor on newly creted grid item
+    // And cause grid-layout using it's own GridItem to make it look
+    // like overlay adding className
     processGridItem(child, isDroppingItem) {
         var _a;
         const gridItem = (_a = super.processGridItem) === null || _a === void 0 ? void 0 : _a.call(this, child, isDroppingItem);
+        if (!gridItem) {
+            return gridItem;
+        }
+        const { props: itemProps } = gridItem;
         if (isDroppingItem) {
-            // Drop item from outside gets 0,0 droppingPosition
-            // centering cursor on newly creted grid item
-            // And cause grid-layout using it's own GridItem to make it look
-            // like overlay adding className
-            if (!gridItem)
-                return null;
-            const { props } = gridItem;
-            const { containerWidth, cols, w, h, rowHeight, margin, transformScale } = props;
+            const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
             const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
             const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const style = gridItem.props.style || null;
+            // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return React.cloneElement(gridItem, {
+                // hiding previre if dragging shared item
+                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, props.droppingPosition), { left: props.droppingPosition.left - leftOffset, top: props.droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
             });
         }
         return gridItem;

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -1,12 +1,10 @@
 import React from 'react';
+import { Ellipsis, Gear, Xmark } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon, } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
-import { COPIED_WIDGET_STORE_KEY, MenuItems, OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
+import { COPIED_WIDGET_STORE_KEY, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
 import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
 import { i18n } from '../../i18n';
-import { CloseIcon } from '../../icons/CloseIcon';
-import { CogIcon } from '../../icons/CogIcon';
-import { DotsIcon } from '../../icons/DotsIcon';
 import { cn } from '../../utils/cn';
 import './OverlayControls.css';
 const b = cn(OVERLAY_CONTROLS_CLASS_NAME);
@@ -31,7 +29,7 @@ class OverlayControls extends React.Component {
             const { title, handler, icon, iconSize, qa } = item;
             const onItemClickHandler = typeof handler === 'function' ? handler : noop;
             return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
-                React.createElement(Icon, { data: icon || CogIcon, size: icon ? iconSize : 24 })));
+                React.createElement(Icon, { data: icon || Gear, size: icon ? iconSize : OVERLAY_ICON_SIZE })));
         };
         this.getDefaultControls = () => {
             const { view, size } = this.props;
@@ -39,7 +37,7 @@ class OverlayControls extends React.Component {
                 return null;
             }
             return (React.createElement(Button, { view: view, size: size, title: i18n('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
-                React.createElement(Icon, { data: CogIcon, size: "24" })));
+                React.createElement(Icon, { data: Gear, size: OVERLAY_ICON_SIZE })));
         };
         this.getCustomLeftOverlayControls = () => {
             // выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
@@ -154,7 +152,7 @@ class OverlayControls extends React.Component {
             return dropdown;
         }
         return (React.createElement(Button, { key: 'delete-control', view: view, size: size, title: i18n('label_delete'), pin: isOnlyOneItem ? 'round-round' : 'brick-round', onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
-            React.createElement(Icon, { data: CloseIcon, size: "12" })));
+            React.createElement(Icon, { data: Xmark, size: OVERLAY_ICON_SIZE })));
     }
     isDefaultMenu(menu) {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
@@ -202,7 +200,7 @@ class OverlayControls extends React.Component {
             return null;
         }
         return (React.createElement(DropdownMenu, { items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: isOnlyOneItem ? 'round-round' : 'brick-round', qa: "dashkit-overlay-control-menu" }),
-                React.createElement(Icon, { data: DotsIcon, size: "16" }))) }));
+                React.createElement(Icon, { data: Ellipsis, size: OVERLAY_ICON_SIZE }))) }));
     }
     getControlItemPinStyle(index, itemsLength) {
         const isOnlyOneItem = itemsLength === 1;

package/build/esm/constants/common.d.ts

@@ -2,6 +2,7 @@ export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
 export declare const DEFAULT_NAMESPACE = "default";
 export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
 export declare const OVERLAY_CLASS_NAME = "dashkit-grid-item__overlay";
+export declare const OVERLAY_ICON_SIZE = 16;
 export declare const TEMPORARY_ITEM_ID = "__dropping-elem__";
 export declare const MenuItems: {
     readonly Copy: "copy";

package/build/esm/constants/common.js

@@ -2,6 +2,7 @@ export const COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 export const DEFAULT_NAMESPACE = 'default';
 export const OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
 export const OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
+export const OVERLAY_ICON_SIZE = 16;
 export const TEMPORARY_ITEM_ID = '__dropping-elem__';
 export const MenuItems = {
     Copy: 'copy',

package/build/esm/hocs/withContext.js

@@ -29,7 +29,7 @@ function useMemoStateContext(props) {
             isEqual(groups, props.groups))) {
             props.onChange({ config, itemsStateAndParams, groups });
         }
-    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    }, [props.config, props.groups, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
     // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
     // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
@@ -37,7 +37,17 @@ function useMemoStateContext(props) {
     const onLayoutChange = React.useCallback((layout) => {
         const currentInnerLayout = layout.map((item) => {
             if (item.i in originalLayouts.current) {
-                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+                // eslint-disable-next-line no-unused-vars
+                const _a = originalLayouts.current[item.i], { parent } = _a, originalCopy = __rest(_a, ["parent"]);
+                // Updating original if parent has changed and saving copy as original
+                // or leaving default
+                if (item.parent) {
+                    originalCopy.parent = item.parent;
+                }
+                originalCopy.w = item.w;
+                originalCopy.x = item.x;
+                originalCopy.y = item.y;
+                return originalCopy;
             }
             else {
                 return Object.assign({}, item);
@@ -234,16 +244,24 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout) => {
+    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (!dragOverPlugin) {
+        let defaultLayout;
+        if (sharedItem) {
+            const { type, h, w } = sharedItem;
+            const _defaults = props.registerManager.getItem(type);
+            defaultLayout = _defaults ? Object.assign(Object.assign({}, _defaults.defaultLayout), { h, w }) : { h, w };
+        }
+        else if (dragOverPlugin) {
+            defaultLayout = dragOverPlugin.defaultLayout;
+        }
+        else {
             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);
@@ -254,7 +272,7 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             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 || {};
+        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 === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
         return {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,

package/package.json

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

package/build/cjs/icons/CloseIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function CloseIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CloseIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CloseIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function CloseIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 10 10", width: "10", height: "10", fill: "currentColor" }, props),
-        react_1.default.createElement("path", { d: "M9.75592 8.57741C10.0814 8.90285 10.0814 9.43049 9.75592 9.75592C9.43049 10.0814 8.90285 10.0814 8.57741 9.75592L5 6.17851L1.42259 9.75592C1.09715 10.0814 0.569515 10.0814 0.244078 9.75592C-0.0813592 9.43049 -0.0813592 8.90285 0.244078 8.57741L3.82149 5L0.244078 1.42259C-0.0813592 1.09715 -0.0813592 0.569515 0.244078 0.244078C0.569515 -0.0813592 1.09715 -0.0813592 1.42259 0.244078L5 3.82149L8.57741 0.244078C8.90285 -0.0813592 9.43049 -0.0813592 9.75592 0.244078C10.0814 0.569515 10.0814 1.09715 9.75592 1.42259L6.17851 5L9.75592 8.57741Z" })));
-}
-exports.CloseIcon = CloseIcon;

package/build/cjs/icons/CogIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function CogIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CogIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CogIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function CogIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor" }, props),
-        react_1.default.createElement("path", { d: "M11.844 16.156a4 4 0 1 1 0-8 4 4 0 0 1 0 8m6-4c0-.029-.004-.058-.004-.087l1.848-.34-.362-1.968-1.852.342a5.992 5.992 0 0 0-1.454-2.246l1.068-1.55-1.646-1.134-1.07 1.55a5.95 5.95 0 0 0-2.528-.567c-.03 0-.058.004-.087.004l-.341-1.848-1.967.363.34 1.851A5.996 5.996 0 0 0 7.546 7.98l-1.55-1.068L4.86 8.558l1.55 1.07a5.95 5.95 0 0 0-.567 2.528c0 .03.004.058.004.087L4 12.584l.362 1.967 1.852-.342a5.992 5.992 0 0 0 1.454 2.246L6.6 18.005l1.646 1.134 1.069-1.55a5.95 5.95 0 0 0 2.529.567c.029 0 .058-.004.087-.004L12.27 20l1.968-.363-.341-1.85a5.996 5.996 0 0 0 2.245-1.455l1.55 1.068 1.134-1.646-1.55-1.069a5.95 5.95 0 0 0 .567-2.529" })));
-}
-exports.CogIcon = CogIcon;

package/build/cjs/icons/CopyIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function CopyIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/CopyIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function CopyIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
-        react_1.default.createElement("path", { d: "M7 14h7V7H7v7zM5 5h11v11H5V5zm4-2v1-1zm1-3H0v10V0h10zM0 10v1h4-4v-1zM10 0h1v4-4h-1zM3 9h1-1zM0 0h11v4H9V2H2v7h2v2H0V0z" })));
-}
-exports.CopyIcon = CopyIcon;

package/build/cjs/icons/DeleteIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function DeleteIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/DeleteIcon.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeleteIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function DeleteIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
-        react_1.default.createElement("g", null,
-            react_1.default.createElement("path", { d: "M13.29 1.605h-2.857V.522A.522.522 0 0 0 9.91 0H6.089a.522.522 0 0 0-.522.522v1.083H2.71a.522.522 0 0 0-.521.522v1.605a.52.52 0 0 0 .521.521h.159L3.345 15.5c.012.28.242.5.521.5h8.268c.28 0 .51-.22.521-.5l.477-11.247h.159a.522.522 0 0 0 .521-.521V2.127a.522.522 0 0 0-.521-.522zm-6.679-.562h2.778v.562H6.611v-.562zm5.023 13.914H4.366L3.912 4.253h8.176l-.454 10.704zM12.769 3.21H3.23v-.562h9.538v.562z" }),
-            react_1.default.createElement("path", { d: "M5.901 5.853a.522.522 0 0 0-.522.522v6.46a.522.522 0 0 0 1.044 0v-6.46a.522.522 0 0 0-.522-.522zm2.099 0a.522.522 0 0 0-.522.522v6.46a.522.522 0 1 0 1.044 0v-6.46A.522.522 0 0 0 8 5.853zm2.099 0a.522.522 0 0 0-.522.522v6.46a.522.522 0 0 0 1.044 0v-6.46a.522.522 0 0 0-.522-.522z" }))));
-}
-exports.DeleteIcon = DeleteIcon;

package/build/cjs/icons/DotsIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function DotsIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/DotsIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DotsIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function DotsIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
-        react_1.default.createElement("path", { d: "M14 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 14 6.125zm-5.906 0a1.874 1.874 0 1 1 0 3.749 1.874 1.874 0 0 1 0-3.749zM2 6.125a1.874 1.874 0 1 1 .001 3.749A1.874 1.874 0 0 1 2 6.125z" })));
-}
-exports.DotsIcon = DotsIcon;

package/build/cjs/icons/TickIcon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare function TickIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/cjs/icons/TickIcon.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TickIcon = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function TickIcon(props) {
-    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor" }, props),
-        react_1.default.createElement("path", { fillRule: "evenodd", d: "M5.95 11.008L1.863 6.572.392 7.927l5.533 6.003 9.67-10.114-1.444-1.381z" })));
-}
-exports.TickIcon = TickIcon;